Vue-2种设置过渡动画的方法

动画设置的6个阶段

过渡动画 transition：提供了6个css类：

• 1、v-enter：在元素插入之前生效

• 2、v-enter-active：在整个动画过程中生效

• 3、v-enter-to：定义过渡的结束状态

• 4、v-leave：在离开动画开始时生效

• 5、v-leave-active：在整个离开动画的过程中生效

• 6、v-leave-to：定义离开时过渡的结束状态

---

第一种方法 --- 自定义名称

默认类名v开头；
但可以自定义动画类名，在 transition 标签中通过 name 属性定义该类名；
使用的时候只需把默认的类名前缀 v 改成自定义的名字即可。

css

<style type="text/css">
/*v- 是默认  fade-是自定义动画名称， 且跟jq不一样，多次点击只触发一次*/
    /*.v-leave-to,.v-enter{
        opacity:0
    }
    .v-leave-active,.v-enter-active{
        transition: 1s;
    }*/
/*将v- 改成自定义名称fade*/
    .fade-enter-to{
        color:greenyellow;
    }
    .fade-leave-to{
        opacity:0;
        color: red;
        transform: translateX(-100%);
    }
    .fade-enter{
        transform: translateX(100%);
    }
    .fade-leave-active,.fade-enter-active{
        transition: 5s all cubic-bezier(.71,-0.22,.4,1.36);
    }
</style>

html

<div id="app">
    <button @click="show">按钮</button>
    <transition name="fade">//---重点
        <p v-show="isShow">{{msg}}</p>
    </transition>
</div>

javascript

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            msg:"hello world!",
            isShow:true
        },
        methods:{
            show(){
                this.isShow = !this.isShow
            }
        }
    })
</script>

第二种方法 --- 引入动画库

enter-active-class="animated bounceInDown"

设置动画阶段-class="animated 动画库里的名称"

css-link

<!--引入动画库-->
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">

html

<div id="app">
    <button @click="change">按钮</button>
    <!--每个动画一个transition标签，比如要给另外一个div加动画，就在另外的div外加一个transition标签-->
    <!--引入动画库-->
    <transition
        enter-active-class="animated bounceInDown"  
        leave-active-class="animated rotateOutUpRight">
        <!--放大看效果比较明显-->
        <p v-show="isShow">你好!</p>
    </transition>
</div>

javascript

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            isShow:true,
        },
        methods:{
            change(){
                this.isShow = !this.isShow;
            }
        }
    })
</script>