Vue学习笔记（十七）之在Vue中使用Animate.css库

CSS动画过渡

CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。
效果

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中使用Animate.css</title>
    <script src="http://vuejs.org/js/vue.js"></script>
    <style>
        @keyframes bounce-in {
            0%{
                transfrom: scale(0);
            }
            50% {
                transform: scale(1.5);
            }
            100% {
                transform: scale(1);
            }
        }
        .fade-enter-active{
            transform-origin: left center;
            animation: bounce-in 1s;
        }
        .fade-leave-active{
            transform-origin: left center;
            animation: bounce-in 1s reverse;
        }
    </style>
</head>
<body>
    <div id="root">
        <transition name="fade">
            <div v-show="show">Hello World</div>
        </transition>
        <button @click="handleClick">Toggle</button>
    </div>
    <script>
        var vm = new Vue({
            el: '#root',
            data: {
                show: true
            },
            methods: {
                handleClick: function () {
                    this.show = !this.show
                }
            }
        })
    </script>
</body>
</html>

自定义过渡的类名

有时候我们希望引用第三方css库，而类名就要用自定义。自定义的类名优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库如 Animate.css 结合使用十分有用。以下特性可以自定义类名：
- enter-class
- enter-active-class
- enter-to-class (2.1.8+)
- leave-class
- leave-active-class
- leave-to-class (2.1.8+)

Demo

效果

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中使用Animate.css</title>
    <script src="http://vuejs.org/js/vue.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
<style>
</style>
</head>
<body>
    <div id="root">
        <transition
                name="fade"
                appear
                enter-active-class="animated bounce"
                leave-active-class="animated pulse"
                appear-active-class="animated bounce"
        >
            <div v-show="show">Hello World</div>
        </transition>
        <button @click="handleClick">Toggle</button>
    </div>
    <script>
        var vm = new Vue({
            el: '#root',
            data: {
                show: true
            },
            methods: {
                handleClick: function () {
                    this.show = !this.show
                }
            }
        })
    </script>
</body>
</html>

同时使用过渡和动画

在一些场景中，你需要给同一个元素同时设置两种过渡动效，比如 animation 很快的被触发并完成了，而 transition 效果还没结束。在这种情况中，你就需要使用 type 特性并设置 animation 或 transition 来明确声明你需要 Vue 监听的类型。如果type依然满足不了需求，可以用duration特性更详细设定动画时间 (以毫秒计)。如：
1
<transition :duration="1000">...</transition>
1
<transition :duration="{ enter: 500, leave: 800 }">...</transition>

效果

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中同时使用过渡和动画</title>
    <script src="http://vuejs.org/js/vue.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
    <style>
        .fade-enter,
        .fade-leave-to {
            opacity: 0;
        }
        .fade-enter-active,
        .fade-leave-active {
            transition: opacity 3s;
        }
    </style>
</head>
<body>
    <div id="root">
        <transition
                type="transition"
                name="fade"
                appear
                enter-active-class="animated bounce fade-enter-active"
                leave-active-class="animated pulse fade-leave-active"
                appear-active-class="animated bounce fade-enter-active"
        >
            <div v-show="show">Hello World</div>
        </transition>
        <button @click="handleClick">Toggle</button>
    </div>
    <script>
        var vm = new Vue({
            el: '#root',
            data: {
                show: true
            },
            methods: {
                handleClick: function () {
                    this.show = !this.show
                }
            }
        })
    </script>
</body>
</html>

CSS动画过渡

自定义过渡的类名

Demo

同时使用过渡和动画

FEATURED TAGS

FRIENDS