在Vue中使用Animate.css库

作者: 云凡的云凡 | 来源:发表于2020-10-14 21:57 被阅读0次

在Vue中使用Animate.css库
VUE之动画特效
vue零基础开发023——Vue中使用animate.css
Vue中的动画
webpack#2.0结合vue-cli搭建开发环境
Vue中应用animate.css
在Vue中使用animate.css库
在Vue中使用animate.css库
在Vue中使用Animate.css库
animate.css的使用方法

在Vue中如何使用keyframs的动画

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>20在Vue中使用Animate.css库</title>
    <script src="./vue.js"></script>
    <style>
        /* */
        @keyframes bounce-in {
            0% {
                transform: scale(0);
            }

            50% {
                transform: scale(1.5);
            }

            100% {
                transform: scale(1);
            }
        }

        .myTransition-enter-active {
            transform-origin: left center;
            animation: bounce-in 1s;
        }

        .myTransition-leave-active {
            transform-origin: left center;
            animation: bounce-in 1s reverse;

        }
        /* 也可以自定义 */
        /* .active {
            transform-origin: left center;
            animation: bounce-in 1s;
        }

        .leave {
            transform-origin: left center;
            animation: bounce-in 1s reverse;

        } */
        /* 给div加上类名就行 */
        /* <transition name="myTransition"  enter-active-class="active" leave-active-class="leave"> */

       
    </style>
</head>

<body>
    <div id="app">
        <transition name="myTransition" >
            <div v-if="show">hello world</div>
        </transition>
        <button @click="show = !show">change</button>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                show: true
            },
            methods: {

            },
        })
    </script>
</body>
</html>

2.Vue中使用Animate.css库
使用animate
aniamate中文网

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>20在Vue中使用Animate.css库</title>
    <script src="./vue.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
</head>

<body>
    <div id="app">
        <transition name="myTransition" enter-active-class="animated swing" leave-active-class="animated shake">
            <div v-if="show">hello world</div>
        </transition>
        <button @click="show = !show">change</button>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                show: true
            },
            methods: {

            },
        })
    </script>
</body>

</html>