Vue 使用 animate.css 库 - 木子才的博客

keyframes CSS3 动画

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="./vue.v2.6.10.dev.js"></script>
        <style>
            @keyframes bounce-in{
                0% {
                    transform: scale(0);
                }
                50% {
                    transform: scale(1.5);
                }
                100% {
                    transform: scale(1);
                }
            }
            
            
            .fade-enter-active {
                transform-origin: left center;
                animation: bounce-in 1s;
            }
            .fade-leave-active {
                transform-origin: left center;
                animation: bounce-in 1s reverse;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <transition name="fade">
                <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>

不想用 Vue 默认的动画命名规范，也可以自己定义名字的：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="./vue.v2.6.10.dev.js"></script>
        <style>
            @keyframes bounce-in{
                0% {
                    transform: scale(0);
                }
                50% {
                    transform: scale(1.5);
                }
                100% {
                    transform: scale(1);
                }
            }
            
            
            .active {
                transform-origin: left center;
                animation: bounce-in 1s;
            }
            .leave {
                transform-origin: left center;
                animation: bounce-in 1s reverse;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <transition name="fade" enter-active-class="active" leave-active-class="leave">
                <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>

animate.css

自己不写动画效果，用第三方 —— animate.css

引入：

<link rel="stylesheet" type="text/css" href="./animate.css"/>

enter-active-class="animated swing"

animated + animate.css 动画效果的名字

<!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"
             enter-active-class="animated swing"
             leave-active-class="animated shake">
                <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>