【VUE】-前端探秘 VUE中的动画特效

最新推荐文章于 2024-04-02 10:50:59 发布

老汉健身

最新推荐文章于 2024-04-02 10:50:59 发布

阅读量879

点赞数

分类专栏：【VUE】文章标签： vue vue动画

本文链接：https://blog.csdn.net/lovexiaotaozi/article/details/88849614

版权

【VUE】专栏收录该内容

6 篇文章 2 订阅

订阅专栏

1.Vue中的动画实现原理

Vue实际上是通过动态地给<transition>标签包裹的内容添加class,然后结合css对不同的class实现不同样式,最终实现动画效果.

<!--淡入/淡出--> 
    <style>
        .v-enter,
        .v-leave-to{
            opacity: 0;
        }
        .v-enter-active,
        .v-leave-active{
            transition:opacity 2s;
        }
    </style>   
<div id="app">
        <transition>
            <div v-show="show">hello world!</div>
        </transition>
        <button @click="handleClick">切换</button>
    </div>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                show:true
            },
            methods:{
                handleClick:function () {
                    this.show = !this.show
                }
            }
        })
    </script>

2.使用animate css库实现各种复杂酷炫的动画效果.

官网:https://daneden.github.io/animate.css/

可以在BOOTCDN找到生产环境需要的animate.css

使用非常简单,引入animate.css后,将需要用动画效果的模块用<transition>标签包裹,然后在其中添加enter-avtive-class="animated xx动画" 和 leave-active-class="animated xx动画",即可为被包裹的组件添加入场和出场动画效果,具体的动画效果长啥样由xx动画名指定,可以在官网上选好后写在animated后面.

<head>
    <meta charset="UTF-8">
    <title>使用animate css</title>
    <link href="https://cdn.bootcss.com/animate.css/3.7.0/animate.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <transition enter-active-class="animated bounce" leave-active-class="animated shake" appear appear-active-class="animated bounce">
            <div v-show="show">hello world!</div>
        </transition>
        <button @click="handleClick">切换</button>
    </div>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                show:true
            },
            methods:{
                handleClick:function () {
                    this.show = !this.show
                }
            }
        })
    </script>
</body>

3.Vue中同时使用过渡和动画

需要强制为transition定义一个名字,比如fade,然后在css中要以该名字打头分别设置xx-enter,xx-leave-to,xx-fade-enter-active,xx-leave-active.

值得注意的是,我们指定了过渡的时间是3秒,然后动画的效果却只有2秒,这时候Vue也不知道要以谁的时长为准了,于是我们需要手动指定type="transition",这时候即以过渡的时间为准.当然你还可以自定义时间,在<transition :duration="xxx毫秒">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用animate css</title>
    <link href="https://cdn.bootcss.com/animate.css/3.7.0/animate.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/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="app">
        <transition type="transition" name="fade" enter-active-class="animated bounce fade-enter-active" leave-active-class="animated shake fade-leave-active" appear appear-active-class="animated bounce">
            <div v-show="show">hello world!</div>
        </transition>
        <button @click="handleClick">切换</button>
    </div>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                show:true
            },
            methods:{
                handleClick:function () {
                    this.show = !this.show
                }
            }
        })
    </script>
</body>
</html>

4.使用js实现动画效果/velocity.js库实现动画效果

可以通过在<transition>标签内添加 @before-enter @enter @after-enter @before-leave @leave @after-enter 钩子来触发事件,通过el绑定要改变的样式,从而实现动画效果.

    <div id="app">
        <transition name="fade" @before-enter="handleBeforeEnter" @enter="handleEnter" @after-enter="handleAfterEnter">
            <div v-show="show">hello world!</div>
        </transition>
        <button @click="handleClick">按钮</button>

    </div>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                show:true
            },
            methods:{
                handleClick:function () {
                    this.show = ! this.show
                },
                handleBeforeEnter:function (el) {
                    el.style.color = 'red'
                },
                handleEnter:function (el,done) {
                    setTimeout(()=>{
                        el.style.color ='green'
                    },2000);
                    setTimeout(()=>{
                        done();
                    },4000)
                },
                handleAfterEnter:function (el) {
                    el.style.color='blue'
                }
            }
        })
    </script>

使用velocity实现动画效果:

先在官网下载velocity.js或者使用bootcdn上的velocity.js

然后在根据官网的语法创造各种酷炫的动画效果.

官网:http://velocityjs.org/#reverse

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcss.com/velocity/2.0.5/velocity.js"></script>
</head>
<body>
    <div id="app">
        <transition name="fade" @before-enter="handleBeforeEnter" @enter="handleEnter" @after-enter="handleAfterEnter">
            <div v-show="show">hello world!</div>
        </transition>
        <button @click="handleClick">按钮</button>

    </div>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                show:true
            },
            methods:{
                handleClick:function () {
                    this.show = ! this.show
                },
                handleBeforeEnter:function (el) {
                    el.style.color = 'red'
                },
                handleEnter:function (el,done) {
                    Velocity(el, { opacity: 0 }, { duration: 500},done());
                },
                handleAfterEnter:function (el) {
                    el.style.color='blue'
                    console.log("动画结束")
                }
            }
        })
    </script>
</body>

5.Vue中多个元素/组件动画效果实现

可以通过给每个元素添加一个key,防止vue复用元素导致动画失效. 还可以设置<transition>的mode为in-out或者out-in来控制动画进入和淡出的先后顺序.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .v-enter,
        .v-leave-to{
            opacity: 0;
        }
        .v-enter-active,
        .v-leave-active{
            transition: opacity 1s;
        }
    </style>
</head>
<body>
    <div id="app">
        <transition mode="out-in">
            <div v-if="show" key="a">hello world</div>
            <div v-else key="b">bye world</div>
        </transition>
        <button @click="handleClick">切换</button>
    </div>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                show:true
            },
            methods:{
                handleClick:function () {
                    this.show = !this.show
                }
            }
        })
    </script>
</body>
</html>

组件实现,其他没啥差别,将<component>放在<transition>标签内即可.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .v-enter,
        .v-leave-to{
            opacity: 0;
        }
        .v-enter-active,
        .v-leave-active{
            transition: opacity 1s;
        }
    </style>
</head>
<body>
    <div id="app">
        <transition mode="out-in">
            <component :is="type"></component>
        </transition>
        <button @click="handleClick">切换</button>
    </div>
    <script>
        Vue.component('my-one',{
            template:'<div>hello world</div>'
        });
        Vue.component('my-two',{
            template:'<div>bye world</div>'
        });
        let vm = new Vue({
            el:'#app',
            data:{
                type:'my-one'
            },
            methods:{
                handleClick:function () {
                    this.type = this.type === 'my-one' ? 'my-two' : 'my-one'
                }
            }
        })
    </script>
</body>
</html>

6.Vue中的列表过渡效果

借助<transition-group>实现.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .v-enter,.v-leave-to{
            opacity: 0;
        }
        .v-enter-active,.v-leave-active{
            transition: opacity 2s;
        }
    </style>
</head>
<body>
<div id="app">
    <transition-group>
        <div v-for="item in list" :key="item.id">
            {{item.title}}
        </div>
    </transition-group>
    <button @click="add">添加</button>
</div>
<script>
    var count = 0;
    let vm = new Vue({
        el: '#app',
        data: {
            list: []
        },
        methods: {
            add: function () {
                this.list.push({
                    id: count++,
                    title: 'this is a title'
                })
            }
        }
    })
</script>
</body>
</html>

7.Vue中的动画封装

在实际开发中,一个动画效果可能被用在多处,我们可以借助Vue的插槽功能将同类型的动画进行封装,这样就可以省去很多重复代码,实现动画组件复用.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <my-fade :show="show">
        <h1>{{msg}}</h1>
    </my-fade>
    <my-fade :show="show">
        <h5>{{msg}}</h5>
    </my-fade>
    <button @click="handleChange">切换</button>
</div>
<script>
    Vue.component('my-fade', {
        template: '<transition @before-enter="handleBeforeEnter" @enter="handleEnter"><slot v-if="show"></slot></transition>',
        props: ['show'],
        methods: {
            handleBeforeEnter: function (el) {
                el.style.color = 'red'
            },
            handleEnter: function (el, done) {
                setTimeout(() => {
                    el.style.color = 'blue';
                    done();
                }, 400)
            }
        }
    });
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'hello world!',
            show: true
        },
        methods: {
            handleChange: function () {
                this.show = !this.show
            }
        }
    })
</script>
</body>
</html>

老汉健身

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【VUE】-前端探秘 VUE中的动画特效

1.Vue中的动画实现原理Vue实际上是通过动态地给<transition>标签包裹的内容添加class,然后结合css对不同的class实现不同样式,最终实现动画效果. <style> .v-enter, .v-leave-to{ opacity: 0; ...
复制链接

扫一扫