过度与动画

Vue封装的过度动画与动画

  1、作用：在插入、更新或移除DOM时，在合适的时候给元素添加样式类名。

  2、Enter

        v-enter 进入的起点

        v-enter-to 进入的终点

        v-enter-active 进入的过程

        v-leave 离开的起点

        v-leave-to 离开的终点

        v-leave-active 离开的过程

  3、写法：

      1、准备好样式：

          a> 元素进入的样式：

                1、v-enter 进入的起点

                  v-enter-to 进入的终点

                  v-enter-active 进入的过程

          b> 元素离开的样式：

                1、v-leave 离开的起点

                  v-leave-to 离开的终点

                  v-leave-active 离开的过程

      2、使用<transition>包裹要过度的元素，并配置name属性：

          <transition name="hello">

            <h1 v-show="isShow">你好啊！</h1>

          </transition>

      3、备注： 若有多个元素需要过度，则需要使用<transition-group></transition-group>且每个元素都要书用key值。