【15】vue.js — 动画

来源：互联网发布：ftp的默认端口编辑：程序博客网时间：2024/06/14 17:28

用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>

阅读全文

0 0