【Vue笔记】transition属性及应用

1、transition属性是什么，为什么要用它？标签的属性变化难免过于生硬。我们想放慢这个过程来达到美化的效果。幸运的是，CSS为我们提供了过渡（transition）属性。只需提供需要更改的属性和动画时间即可。2、Playground菜鸟教程在线编辑3、个人的一些理解是，从状态A过渡到状态B时，只需要在原来的状态A上加上transition属性，就可以得到过渡效果。当状态恢复时，transition默认已经提供了恢复时的transitionstate。B上不用写transition4，使用transition构造组件。侧槽为灰色状态B。开关打开后，右侧槽中的白球为蓝球运动。再次点击switch，回到状态A，说明switch组件中白球的移动可以进行变换：translateX(move)实现transform属性不会改变布局状态。布局状态的改变可以通过绑定类来实现，类的改变可以通过点击时间来实现。svg图标是我从iconfot.cn下载的基本骨架样式整体样式div.switcher:hover{cursor:pointer;}div.switcher-slot{width:210px;border-radius:35px;display:flex;background-color:rgba(0,0,0,0.1);}按钮样式svg.icon{fill:white;width:70px;height:70px;}div.button{display:flex;align-items:center;border-radius:35px;}点击后div.switcher.button{transition:transform0.5s;}div.switcher.active.button{transform:translateX(140px);}div.switcherdiv.switcher-slot{transition:background-color0.3s;background-颜色：rgba(0,0,0,0.1);}div.switcher.activediv.switcher-slot{background-color:#1b9aee;}actiondesignexportdefault{props:{active:{type:Boolean,default:false,},},methods:{toggle(){this.$emit('toggle')},}p}在父组件Home.vueDEMO4.2drawerIntroductionElementUI这里我简化了一点（其实很多，都修改过了），我打算把内容放在屏幕中间，把需要的组件设计成两部分，遮罩层和内容层。事实上，这整个组件就是一个遮罩层。当然你也可以再做一个遮罩层。它需要独立于文档流布局。点击内容以外的空白处。当你退出抽屉组件并显示抽屉时，内容层需要从下往上慢慢的。绘制出来，遮罩层不需要在内容层上加一层阴影注意在对整个组件实现transform:translateY(100%)时，组件布局在页面底部，不可见遮罩层是无色的，就像一层玻璃，避免点击下面的组件。遮罩层默认覆盖整个界面。给content层加阴影是怕看不到这一层。可以使用点击时产生的$event来判断被点击的元素。具体来说，只需打印出此$event并亲自查看即可。可以设置内容层的position定位属性重新Lative，让子组件在使用绝对定位时可以引用基础框架。样式整体框架div.modal{position:absolute;左：0；右：0；顶部：0；底部：0；z-index:100;}div.modal-main{box-shadow:001000pxblack;}结构布局div.modal{display:flex;对齐项目：居中；调整内容：中心；}div.modal-main{位置：相对；}设置转换div.modal{转换：translateY(100%);transition:transform0.5s;}div.modal.active{transform:translateY(0);}Actiondesignexportdefault{道具:{active:{type:Boolean,default:false,},bcolor:{type:String,default:'white',},width:{type:String,default:"50%",},height:{type:String,default:"60%",},},方法：{styleOf(width,height,bcolor){return{'width':width,'height':height,'background-color':bcolor}},clickBlank(event){if(event.target.className=='modalactive'){this.$emit('hide-modal')}},},}在父组Home.vue中演示