Vue过渡动画小结

1.1单元素的过渡

通过transition标签设置name属性，然后

<transition name="ani">
        <!-- 1. 切换元素显示 v-show 或者 v-if 都可以 -->
        <img v-show="Show" src="./img/Skarner.png" alt="" /> </transition>

根据name设置过度样式

	 /* 隐藏->显示 整个过程都有的类名 */
      .slide-fade-enter-active {
        transition: all 1s linear;
      }
      /* 显示->隐藏 整个过程都有的类名 */
      .slide-fade-leave-active {
        transition: all 8s ease;
      }
		//开始的开始
     .slide-fade-enter {
        transform: translateX(10px) scale(0) rotate(360deg);
        opacity: 0;
      }
 		//最后的最后
      .slide-fade-leave-to {
        transform: translateX(10px) rotate(3600deg) scale(0);
        opacity: 0;
      }

v-enter-active隐藏到显示的过程：

开始样式，结束样式，

v-leave-active显示到隐藏的过程：

开始样式，结束样式

同时注意除了节点之外，过程也是可以设置的，可以参考上面的示例代码

1.2列表的过渡

1.通过<translation-group></translation>组件实现

2.特点：

2.1不同于<translation></translation>组件，它是一个真实的元素，默认是一个<span>,可以通过tag属性设置为不同的元素

<transition-group name="chicken" tag="section">

2.2过渡模式不适用，因为没有相互切换的特有元素

2.3组件内部需要提供唯一的key值，通过bind:设置

2.4 CSS过渡的类在组件的内部，而不是组件本身

ex:

<transition-group name="list" tag="ul">
        <li class="list-item" v-for="item in foods" :key="item.id">
          {{ item.name }}
        </li>
</transition-group>

3.多元素过渡

多元素的过渡不需要使用key，只需要用动态的组件即可

设置组件

<transition name="component-fade" mode="out-in">
  <component v-bind:is="view"></component>
</transition>

设置组件格式

components: {
    'v-a': {
      template: '<div>Component A</div>'
    },
    'v-b': {
      template: '<div>Component B</div>'
    }
  }

设置过渡动画，

上面对应淡入过程和淡出过程，

下面对应开始和结束

.component-fade-enter-active, .component-fade-leave-active {
  transition: opacity .3s ease;
}
.component-fade-enter, .component-fade-leave-to
/* .component-fade-leave-active for below version 2.1.8 */ {
  opacity: 0;
}