手把手教你Vue框架从入门到实战项目（四）

第四章 过渡 & 动画

VUE中CSS动画原理

如果你希望你的某个内容呈现动画效果，需要在当前内容的标签的外部写上transition标签。同时可以给该标签命名一个任意名字。

<transition name="fade">
    <div v-if="show">hello world</div>
</transition>

实际上加了上面的代码，还不是不能实现动画效果，为什么呢？我们来看看它的动画原理：当一个元素被transition包裹了之后，Vue会自动的分析一下元素的CSS样式，然后构建一个动画的流程，如下图所示。

在动画即将执行的这一瞬间，Vue会在元素上增加两个class属性（fade-enter、fade-enter-active）。当动画运行到第二帧的时候，Vue会帮你做两件事情，第一件Vue会把fede-enter移除，再增加一个fade-enter-to，当动画执行到最后的时候会把fade-enter-active和fade-enter-to都移除。

进入代码实现：

<style>
    /*这里写fade原因transition有个name属性，否则使用默认的 v- 开头*/
    .fade-enter{
    opacity:0}
    .fade-enter-active{
    transition:opacity 1s}
    /*.v-enter{opacity:0}*/
</style>

<div id="app">
    <transition name="fade">
        <div v-if="show">hello world</div>
    </transition>
    <button @click="toggle">切换</button>
</div>

<script>
    new Vue({
    
        el:"#app",
        data:{
    
            show:true
        },
        methods:{
    
            toggle:function(){
    
                this.show = !this.show;
            }
        }
    })
</script>

现在我们已经学会了动画进入时的效果，那么离开的效果是什么样的呢？我们看到下面这图，他与前面所讲的原理过程是一样的。

进入与离开代码css实现：

<style>
    .fade-enter,.fade-leave-to{
    opacity:0}
    .fade-enter-active,.fade-leave-active{
    transition:opacity 1s}
</style>

使用animate.css库

在使用动画库之前，我们先来用keyframes实现我们想要的动画。

<style>
    @keyframes aimateName{
    
        /*scale() 表示缩放*/
        0%{
    transform:scale(0)}
        50%{
    transform:scale(1.5)}
        100%{
    transform:scale(1)}
    }

    .fade-enter,.fade-leave-to{
    
        transform-origin: left center
        animation:aimateName
    }
    .fade-enter-active,.fade-leave-active{
    
        /*必须加上该句 不然没效果 允许对该元素进行缩放*/
        transform-origin: left center
        animation:aimateName 1s reverse
    }
</style>

接下来我们再来说一个知识点，有时候我们想要在元素上使用自定义的样式，又该怎么写呢？

<style>
    @keyframes aimateName{
    
        /*scale() 表示缩放*/
        0%{
    transform:scale(0)}
        50%{
    transform:scale(1.5)}
        100%{
    transform:scale(1)}
    }

    .enter{
    
        transform-origin: left center
        animation:aimateName
    }
    .leave{
    
        /*必须加上该句 不然没效果 允许对该元素进行缩放*/
        transform-origin: left center
        animation:aimateName 1s reverse
    }
</style>

<div id="app">
    <!-- 使用自定义css样式-->
    <transition name="fade" enter-active-class="enter" leave-active-class="leave">
        <div v-if="show">hello world</div>
    </transition>
    <button @click="toggle">切换</button>