Vue动画和animate.Css相结合 Vue动画和animate.Css相结合

Vue动画和animate.Css相结合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画2</title>
    <script src="bower_components/vue/dist/vue.js"></script>
        <link rel="stylesheet" href="bower_components/animate.css/animate.css">
</head>
<body>
    <div id="box">
        <input type="button" value="运动" @click="toggle()">
        <div id="app" transition="bounce" v-show="bsign" class="animated">

        </div>
    </div>
</body>
<style> 
#box{
    width: 400px;
    margin:20px auto;

}
#app{
    background: red;
    height: 100px;
    width: 100px;
    margin-top: 50px;
}
</style>
<script>
    new Vue({
        el:"#box",
    data:{
        bsign:true
    },
    methods:{
       toggle:function(){
           return this.bsign=!this.bsign
       }
    },transitions:{
        bounce:{
            enterClass:"zoomInLeft",
            leaveClass:"rubberBand"
        }
    }
    })
</script>
</html>
分享本文至:

评论 1

挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论

清空信息
关闭评论
lininn
lininn 2017-10-10 20:51 回复
fdsfsddfsdf
 手机发表此评论