vue.js.2x 组件进阶

组件进阶

因为在vue里面的组件添加的动画会被无视
所以vue提供<transition></transition>组件
当被transition包裹的元素会被添加入场 / 离场的过渡
离场动画的类名:v-leave v-leave-active v-leave-to
入场动画的类名:v-enter v-enter-active v-enter-to
自动添加类名

一般可以把v-enter 与v-leave-to 样式写一起
v-enter-active与v-leave-active样式写一起
另外两个一般不写

如果想要写单独的动画 可以在transition加name属性自定义类名 name会替换v的地方
也可以绑定动画 如下图所示

在一个transfrom里面只能放一个标签
如果相放多个时使用<transition-group></transition-group>
一般用于列表
transition-grop默认渲染一个span标签
通过tag="ul"可以将它改为渲染ul标签

动态组件的过渡

一般要加mode=out-in模式

列表过渡

使用 <transition-group tag="ul"></transition-group>
其他动画效果与transition写法相似
排序过渡v-move类名
当列表兄弟元素之间发现移动时一般需要添加如图动画

一般需要格外给离场动画加定位