vue动画效果实现方法示例

2019-11-19 11:58:52

字体：大中小

来源：转载

供稿：网友

本文实例讲述了vue动画效果实现方法。分享给大家供大家参考，具体如下：

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>www.VeVB.COm vue动画</title>  <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>  <link rel="stylesheet" href="https://cdn.bootcss.com/animate.css/2.0/animate.css" rel="external nofollow" />  <style>    #box{      width:400px;      margin: 0 auto;    }    #div1{      width:100px;      height:100px;      background: red;    }  </style></head><body>  <div id="box">    <input type="button" value="按钮" @click="toggle">    <div id="div1" class="animated" v-show="bSign" transition="bounce"></div>  </div>  <script>    new Vue({      el:'#box',      data:{        bSign:true      },      methods:{        toggle(){          this.bSign=!this.bSign;        }      },      transitions:{ //定义所有动画名称        bounce:{          enterClass:'zoomInLeft',//动画进入          leaveClass:'zoomOutRight'//动画离开        }      }    });  </script></body></html>

运行效果：