欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

vue 和animate.css动画使用

程序员文章站 2024-03-25 12:55:28
...
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="css/animate.css" />
</head>

<body>
    <div class="asd">
        <div v-bind:class="{ bounceInUp: qwe,animated:qwe}">asdas</div>
        <!--添加class-->
        <button v-on:click="dj">点击动画 </button>
        <!--添加点击事件-->
    </div>
</body>
<script type="text/javascript">
var app = new Vue({
    el: '.asd',
    data: {
        qwe: false
    },

    methods: {
        dj: function() {
            this.qwe = !this.qwe;
            //	我已经已经在前边定义了data:{qwe: false},此时qwe是false,
            //	当我点击按钮式qwe的值就是(=!) {qwe: ture}
            //	再点击{qwe: false},以此进行class的添加与删除

        }
    }

})
</script>

</html>

此为两个按钮的vue动画

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="css/animate.css" />
    <style type="text/css">
    .div {
        width: 200px;
        height: 200px;
        background: blue;
        transition: height 2s;
        -moz-transition: width 2s;
        /* Firefox 4 */
        -webkit-transition: width 2s;
        /* Safari and Chrome */
        -o-transition: width 2s;
        /* Opera */
    }
    
    .divv {
        width: 400px;
        height: 400px;
        background: blue;
    }
    </style>
</head>

<body>
    <div class="asd">
        <button v-on:click="dj">购买</button>
        <div class="animated div bounceInLeft" v-bind:class="{bounceInLeft:eqw,bounceInRight:qwe,div:ewq,divv:qwe}"></div>
        <!--添加class-->
        <span v-on:click="gb">x</span>
    </div>
</body>
<script type="text/javascript">
var app = new Vue({
    el: '.asd',
    data: {
        qwe: true,
        ewq: false
    },

    methods: {
        dj: function() {
            this.eqw = true,
                this.qwe = false

        },

        gb: function() {
            this.eqw = false,
                this.qwe = true
        }
    }

})
</script>

</html>

过度效果官方API文档：https://cn.vuejs.org/v2/guide/transitions.html

上一篇： 基于Taro实现的抛物线动效

下一篇： WPF 动画笔记

推荐阅读