vue动画过渡效果以及 animate.css、velocity.js的基本使用

最新推荐文章于 2024-08-09 08:26:23 发布

outsiderlcy

最新推荐文章于 2024-08-09 08:26:23 发布

阅读量1.9k

点赞数

分类专栏： vue 动画 animate velocity

本文链接：https://blog.csdn.net/outsiderlcy/article/details/84106121

版权

vue 同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

动画

1 篇文章 0 订阅

订阅专栏

animate

1 篇文章 0 订阅

订阅专栏

移入

移出

最基本动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>使用animate.css</title>
    <script src="./vue.js"></script>
    <style>
        .fade-enter, .fade-leave-to {
            opacity: 0;
        }
        .fade-enter-active, .fade-leave-active {
            transition: opacity 3s;
        }
    </style>
</head>
<body>
    <div id="root">
        <transition name="fade">
            <div v-show="show">Say Hello</div>
        </transition>
        <button @click="handleClick">切换</button>
    </div>
    <script>
        var vm = new Vue({
            el: "#root",
            data: {
                show: true
            },
            methods: {
                handleClick() {
                    this.show = !this.show
                }
            }
        })
    </script>
</body>
</html>

使用 keyframs实现动画

css:

    <style>
        @keyframes bounce-in {
            0% {
                transform: 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>

这个时候就会产生一个问题这个css的样式名称必须按照格式严格命名吗？当然不。如果需要自己命名，可以在html进行想应的修改如下：

active可对应上面的fade-enter-active,leave可对应上面的fade-leave-active

    <div id="root">
        <transition 
            name="fade"
            enter-active-class="active"
            leave-active-class="leave">
            <div v-show="show">Say Hello</div>
        </transition>
        <button @click="handleClick">切换</button>
    </div>

在自定义样式名称的基础上使用animate

引入animate.css

    <div id="root">
        <transition 
            name="fade"
            enter-active-class="animated shake"
            leave-active-class="animated swing">
            <div v-show="show">Say Hello</div>
        </transition>
        <button @click="handleClick">切换</button>
    </div>

同时使用过渡效果和动画

结合上面两种在enter-active-class、leave-active-class中添加过度效果样式

js动画与velocity.js结合

js:

<body>
    <div id="root">
        <transition 
            name="fade"
            @before-enter="handleBeforeEnter"
            @enter="handleEnter"
            @after-enter="handleAfterEnter">
            <div v-show="show">Say Hello</div>
        </transition>
        <button @click="handleClick">切换</button>
    </div>
    <script>
        var vm = new Vue({
            el: "#root",
            data: {
                show: true
            },
            methods: {
                handleClick() {
                    this.show = !this.show
                },
                handleBeforeEnter(el) {
                    // el 表示动画包裹的表情
                    // 动画前的样式
                    el.style.color = 'red'
                },
                handleEnter(el, done) {
                    // done 是一个回调函数
                    // 真正展示的动画效果
                    setTimeout(() => {
                        el.style.color = 'green'
                        done() // 告诉vue动画处理完了 这个时候回继续调用after-enter时间
                    }, 2000)
                },
                handleAfterEnter() {
                    el.style.color = '#000'
                }
            }
        })
    </script>
</body>

除了上述的入场动画还有出场动画事件：before-leave、leave、after-leave用法与enter相同

引用velocity.js

    <script>
        var vm = new Vue({
            el: "#root",
            data: {
                show: true
            },
            methods: {
                handleClick() {
                    this.show = !this.show
                },
                handleBeforeEnter(el) {
                    el.style.opacity = 0
                },
                handleEnter(el, done) {
                    // duration 表示时间ms
                    Velocity(el, {opacity: 1}, {duration: 1000})
                },
                handleAfterEnter() {
                   console.log('动画结束')
                }
            }
        })
    </script>