【15】vue.js — 動畫

有心部落格發表於2017-09-07
Vue.js動畫

用css控制動畫

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/vue.js" ></script>
        <style>
            #div1 {
                width: 100px;
                height: 100px;
                margin: 0 auto;
                background: red;
            }
            .fade-transition {
                transition: 1s all ease;
            }
            .fade-enter {
                opacity: 0;
                transform: translateX(-200px);
            }
            .fade-leave {
                opacity: 0;
                transform: translateX(200px);
            }
        </style>
    </head>
    <body>
        <div id="box">
            <input type="button" value="按鈕" @click="toggle" />
            <div id="div1" v-show="bSign" transition="fade"></div>
        </div>
    </body>
    <script>
        var vm=new Vue({
            el: '#box',
            data: {
                bSign: true
            },
            methods: {
                toggle() {
                    this.bSign = !this.bSign;
                }
            }
        });
    </script>
</html>

用animate.css控制動畫

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/vue.js" ></script>
        <!-- 引入animate.css樣式檔案 -->
        <link rel="stylesheet" href="css/animate.css" />
        <style>
            #box {
                width: 100px;
                margin: 0 auto;
            }
            #div1 {
                width: 100px;
                height: 100px;
                margin: 0 auto;
                background: red;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <input type="button" value="按鈕" @click="toggle" />
            <!-- 給要進行動畫的新增animated類， -->
            <div id="div1" class="animated" v-show="bSign" transition="bounce"></div>
        </div>
    </body>
    <script>
        var vm=new Vue({
            el: '#box',
            data: {
                bSign: true
            },
            methods: {
                toggle() {
                    this.bSign = !this.bSign;
                }
            },
            //vue提供的動畫集合
            transitions: {
                bounce: {
                    enterClass: 'zoomInLeft',
                    leaveClass: 'zoomOutRight'
                }
            }
        });
    </script>
</html>

相關文章