Vue动画

自定义动画

官网地址

1. 步骤

我们首先要给包含动画的元素加上一个transition的标签。
<transition></transition>
知道动画的开始和结束

1. v-enter这个样式定义的是初始状态可以和v-leave-to写在一起。（也可以分别定义）
   opcity="0"
2. v-enter-to 定义进场动画结束的状态。和v-leave可以写在一起
   opcity="1" 为默认值，可不写
3. 定义过程v-enter/leave-active就可以了

 		<style>
 		.v-enter,
        .v-leave-to {
            opacity: 0;
        }
        .v-enter-active,
        .v-leave-active {
            /* 使用all是所有种类的切换效果 */
            transition: all 1s ease;
            }
        </style>   

2.对特定组件生效

默认名为v，也可以给transition起自定义名字 name=“自定义的名字”

使用第三方动画的样式

Animate.css网址
引入链接
<link href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css" rel="stylesheet">
在transition中，

1. 指定入场动画和出场动画
   enter-active-class=“animated 网站中的效果名 ”
   设置进场的样式
   leave-active-class=“ animated 网站中的效果名”
   离开的样式’
2. 指定动画时长，分别指定入场和离场时长
   :duration{enter:'“”,leave:“”}通过这种方式可以分别指定进场和出场动画时常

半场动画

1. 常用生命周期函数
   v-on:before-enter="函数名字"
   // 定义开始状态
   v-on:enter="函数名字"
   // 定义动画结束的状态
   v-on:after-enter="函数名字"
   // 动画完成之后会执行

2. enter 和 leave 中必须使用 done 进行回调

   <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
            <div></div>
   </transition>

     methods: {
                beforeEnter(el) {
                    el.style.transform = 'translate(0,0)';
                },
                enter(el, done) {
                    el.offsetWidth;
                      // 看起没有什么用，实则很有用
                    	// 加上这么一个内容之后，相当浏览器去刷新了动画
                    el.style.transform = 'translate(200px,500px)';
                    el.style.transition = 'all .5s ease';
                     // 这个参数其实就是afterEnter的引用
                    done();
                },
                afterEnter(el) {
                    this.flag = !this.flag;
                }
            }

列表动画

1.添加元素的动画

1. 如果想给v-for元素增加动画的化，需要使用transition-group
   如列表的渲染
2. 必须给列表元素添加:key值
   其他的和我们使用transition是一致的
3. 删除效果
   v-move的样式用于列表的重排
   设置v-leave-active的定位

.v-leave-active {
            position: absolute;
        }

4. 如果想刚开始加载的时候就有一个动画的效果可以使用appear这个关键字
5. 指定标签
   默认包裹标签是span
   tag指定包裹标签
   如<transition-group appear tag="ul">

组件切换动画

设置mode属性

• out-in 先出在进
• in-out 先进再出
  <transition mode='out-in'> ...</transition>