Vue 同时使用多个动画效果

第一次没有动画效果，刷新页面的时候，没有效果~~~

解决方法：

加上appear，触发显示动作，然后指定 appear-active-class 的动画效果。

PS: 如果没有写appear 真的没有效果！

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="./vue.v2.6.10.dev.js"></script>
        <link rel="stylesheet" type="text/css" href="./animate.v3.7.0.css"/>
    </head>
    <body>
        <div id="app">
            <transition name="fade"
             appear
             enter-active-class="animated swing"
             leave-active-class="animated shake"
             appear-active-class="animated swing">
                <div v-if="show">Hello World</div>
            </transition>
            <button @click="handleClick">切换</button>
        </div>
        
        <script>
            var vm = new Vue({
                el: '#app', 
                data: {
                    show: true,
                },
                methods: {
                    handleClick: function() {
                        this.show = !this.show
                    }
                }
            })
        </script>
    </body>
</html>

keyframes 动画和transition动画。
过渡和动画同时执行：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="./vue.v2.6.10.dev.js"></script>
        <link rel="stylesheet" type="text/css" href="./animate.v3.7.0.css"/>
        <style>
            .fade-enter {
                opacity: 0;
            }
            .fade-leave-to {
                opacity: 0;
            }
            .fade-enter-active,
            .fade-leave-active {
                 transition: opacity 3s;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <transition name="fade"
             appear
             enter-active-class="animated swing fade-enter-active"
             leave-active-class="animated shake fade-leave-active"
             appear-active-class="animated swing">
                <div v-if="show">Hello World</div>
            </transition>
            <button @click="handleClick">切换</button>
        </div>
        
        <script>
            var vm = new Vue({
                el: '#app', 
                data: {
                    show: true,
                },
                methods: {
                    handleClick: function() {
                        this.show = !this.show
                    }
                }
            })
        </script>
    </body>
</html>

过渡和动画的时长不一样，可以通过指定类型来确保两者时长一致。

type="transition"

<div id="app">
    <transition name="fade"
     type="transition"
     appear
     enter-active-class="animated swing fade-enter-active"
     leave-active-class="animated shake fade-leave-active"
     appear-active-class="animated swing">
        <div v-if="show">Hello World</div>
    </transition>
    <button @click="handleClick">切换</button>
</div>

也可以自行定义时间的长度：

:duration=5000

<div id="app">
    <transition name="fade"
     :duration=5000
     appear
     enter-active-class="animated swing fade-enter-active"
     leave-active-class="animated shake fade-leave-active"
     appear-active-class="animated swing">
        <div v-if="show">Hello World</div>
    </transition>
    <button @click="handleClick">切换</button>
</div>

当然这样做的话，两个效果的世界也不会一致的。

可以设置更复杂的：

:duration="{enter: 5000, leave: 10000}"

<div id="app">
    <transition name="fade"
     :duration="{enter: 5000, leave: 10000}"
     appear
     enter-active-class="animated swing fade-enter-active"
     leave-active-class="animated shake fade-leave-active"
     appear-active-class="animated swing">
        <div v-if="show">Hello World</div>
    </transition>
    <button @click="handleClick">切换</button>
</div>

进入进出的时长都不一样。