vue过渡&动画

vue提供了transition的封装组件，下列情形中，可以给任何元素和组件添加进入或离开的过渡。

    <style>
        /* 六个状态 */
        /* 由于之前设置了name属性，所以样式的前缀会被替换为move- */
        /* 4.添加六种状态 */
        .move-enter {
            margin-left: 200px;
            opacity: 0;
        }
        .move-enter-active {
            transition: all 1s;
        }
        .move-enter-to {
            margin-left: 0;
            opacity: 1;
        }
        .move-leave {
            margin-left: 0;
            opacity: 1;
        }
        .move-leave-active {
            transition: all 1s;
        }
        .move-leave-to {
            margin-top: 200px;
            opacity: 0;
        }
    </style>
	<div id="app">
        <button @click='isShow = !isShow'>切换</button>
        <!-- 2.将需要添加过渡动画的元素包裹在transition组件(标签)中 -->
        <!-- 3.为transition添加name属性,后期这个name值会被当成样式的前缀 -->
        <transition name="move">
            <!-- 1.为元素添加v-show或v-if -->
            <p v-show='isShow'>我有动画哦</p>
        </transition>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                isShow: false
            }
        })
    </script>

transition的作用：
需要添加过渡元素，用transition组件包裹起来，结合css或者js钩子函数就能实现该元素进入或者离开的动画效果。

1、transition结合css实现过渡

  <style>
        /* 控制整个动画的执行过程 */
        .slide-enter-active,.slide-leave-active {
            transition: all 2s;
        }

        /* 设定动画出现的起始位置和动画离开的结束位置 */
        .slide-enter,.slide-leave-to {
            padding-left:100px;
        }

       /* 设定动画离开的起始位置，和动画进入的结束位置 */
        .slide-enter-to,.slide-leave {
            padding-left:0px;
        }
    </style>

    <transition name="slide">
        <span v-if="isshow">hello</span>
    </transition>

2、transition结合animate.css实现过渡

animate.css库链接

 <!-- 引入animate.css文件 -->
  <link rel="stylesheet" href="./animate.css">

  <!-- 2.0 在想要进行动画的元素上使用 <transition>组件包住
    transition:
      在transition 这个标签中有两个属性：
      1. enter-active-class：控制动画的进入
      2. leave-active-class：控制动画的离开

      上面两个属性中的值写法注意点：
      1. 两个属性中均要编写 animate.css中定义好的一个类  animated
      2. 在两个属性中分别取animate.css中控制的动画样式即可(按需获取)
  -->
  <transition enter-active-class="animated fadeInRight" leave-active-class="animated fadeOutRight">
    <span style="display:block;width:300px;" v-if="isshow">hello </span>
  </transition>

3、transition结合钩子函数实现过程

1. 过渡动画进入
   before-enter 过渡动画进入之前，一般在这个方法中定义目标元素的初始位置
   enter 过渡动画进入中，在这个方法中定义目标元素的结束位置
   after-enter 过渡动画结束后，通常在这个方法里面重置初始值
   enter-cancelled 取消过渡动画时被调用
2. 过渡动画离开
   before-leave 动画离开之前触发
   leave 过渡动画进入中触发
   after-leave 过渡动画离开结束后
   leave-cancelled 取消过渡动画时被调用

<transition 
	@before-enter="beforeEnter" 
	@enter="enter" 
	@after-enter="afterEnter"
>
	<span class="show" v-if="isshow">hello</span>
</transition>

        methods: {
            // 1.0 动画进入前
            beforeEnter: function (el) {
                console.log('1.0 beforeEnter');

                // 在这个方法中设定当前动画元素的起始位置
                el.style = "padding-left:100px";
            },
            // 2.0 动画执行中
            // el:动画的元素dom对象
            // done:enter事件执行完以后的回调，执行了它之后，afterEnter事件才会执行
            enter: function (el, done) {
                console.log('2.0 enter');
                var step = 3;
                var interval = setInterval(() => {
                    el.style.paddingLeft = (100 - step) + 'px';
                    step++;
                    if (parseInt(el.style.paddingLeft) <= 0) {
                        clearInterval(interval)
                        // 动画结束后必须执行done()函数
                        done()
                    }
                }, 10)
            },
            // 3.0 动画执行完毕
            afterEnter: function (el) {
                console.log('3.0 afterEnter');
                // 将isshow重置为false即可
                this.isshow = false;
            },
            showhide: function () {
                this.isshow = !this.isshow;
            }
        }