vue的动画特效

最新推荐文章于 2024-08-16 12:40:11 发布

i小默

最新推荐文章于 2024-08-16 12:40:11 发布

阅读量515

点赞数

分类专栏：前端文章标签： vue html js

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_36142158/article/details/110089188

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue.js中CSS和JS实现的过渡动画，包括单元素过渡、多个元素过渡、列表过渡以及如何封装自定义动画组件。通过示例代码展示了如何使用`transition`标签结合Velocity.js库创建动态效果，并探讨了不同过渡模式的应用。

摘要由CSDN通过智能技术生成

一、Vue中的CSS动画原理

transition标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue中CSS动画原理</title>
        <script src="../vue.js"></script>
        <style>
            .v-enter,
            .v-leave-to {
                opacity: 0;
            }
            .v-enter-active,
            .v-leave-active {
                transition: opacity 3s;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <transition>
                <div v-if="show">hello world</div>
            </transition>
            <button @click="handleClick">切换</button>
        </div>
        
        <script>
            var vm = new Vue({
                el:"#app",
                data: {
                    show: true
                },
                methods:{
                    handleClick: function() {
                        this.show = !this.show
                    }
                }
            })
        </script>
    </body>
</html>

二、Vue中的JS动画与velocity.js

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue中的JS动画与velocity.js</title>
        <script src="../vue.js"></script>
        <script src="../velocity.js"></script>
    </head>
    <body>
        <div id="app">
            <transition
                name="fade"
                @before-enter="handleBeforeEnter"
                @enter="handleEnter"
                @after-enter="handleAfterEnter"
            >
                <div v-if="show">hello world</div>
            </transition>
            <button @click="handleClick">toggle</button>
        </div>
        
        <script>
            var vm = new Vue({
                el:"#app",
                data: {
                    show: true
                },
                methods:{
                    handleClick: function() {
                        this.show = !this.show
                    },
                    handleBeforeEnter: function(el) {
                        el.style.opacity = 0;
                    },
                    handleEnter: function(el, done) {
                        Velocity(el, {
                            opacity: 1,
                        }, {
                            duration: 1000,
                            complete: done
                        })
                    },
                    handleAfterEnter: function(el) {
                        console.log('动画结束');
                    }
                }
            })
        </script>
        
        
    </body>
</html>

三、Vue中多个元素或者组件的过渡

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue中多个元素或者组件的过渡</title>
        <script src="../vue.js"></script>
        <script src="../velocity.js"></script>
        <style type="text/css">
            .v-enter, .v-leave-to {
                opacity: 0;
            }
            .v-enter-active, .v-leave-active {
                transition: opacity 1s;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <transition mode="in-out">
                <component :is="type"></component>
            </transition>
            <button @click="handleClick">toggle</button>
        </div>
        
        <script>
            Vue.component('chile', {
                template:"<div>child</div>"
            })
            
            Vue.component('chile-one', {
                template:"<div>child-one</div>"
            })
            var vm = new Vue({
                el:"#app",
                data: {
                    type: 'chile'
                },
                methods:{
                    handleClick: function() {
                        this.type = this.type === 'chile' ? 'chile-one' : 'chile';
                    },
                
                }
            })
        </script>
        
        
    </body>
</html>

四、Vue中的列表过渡

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue中的列表过渡</title>
        <script src="../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-group>
            <div v-for="(item, index) of list" :key="item.id">{{item.title}}</div>
            </transition-group>
            <button @click="handleBtnClick">Add</button>
        </div>
        
        <script>
            
            var count = 0;
            
            var app = new Vue({
                el:'#app',
                data:{
                    list: []
                },
                methods:{
                    handleBtnClick: function() {
                        this.list.push({
                            id: count++,
                            title: 'hello world'
                        })
                    }
                }
            })
        </script>
    </body>
</html>

五、Vue中的动画封装

使用css动画：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue中的动画效果</title>
        <script src="../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">
            <fade :show="show">
                <div>Hello World</div>
            </fade>
            
            <fade :show="show">
                <h1>Hello World</h1>
            </fade>
            
            <button @click="handleBtnClick">toggle</button>
        </div>
        
        <script>
            Vue.component('fade', {
                props:['show'],
                template:`
                    <transition>
                        <slot v-if="show"></slot>
                    </transition>
                `
            })
            var app = new Vue({
                el:'#app',
                data:{
                    show: false
                },
                methods:{
                    handleBtnClick: function() {
                        this.show = !this.show
                    }
                }
            })
        </script>
    </body>
</html>

使用js动画：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue中的动画效果</title>
        <script src="../vue.js"></script>
    </head>
    <body>
        <div id="app">
            <fade :show="show">
                <div>Hello World</div>
            </fade>
            
            <fade :show="show">
                <h1>Hello World</h1>
            </fade>
            
            <button @click="handleBtnClick">toggle</button>
        </div>
        
        <script>
            Vue.component('fade', {
                props:['show'],
                template:`
                    <transition 
                        @before-enter="handleBeforeEnter"
                        @enter="handleEnter"
                    >
                        <slot v-if="show"></slot>
                    </transition>
                `,
                methods:{
                    handleBeforeEnter: function(el) {
                        el.style.color = 'red'
                    },
                    handleEnter: function(el, done) {
                        setTimeout(() => {
                            el.style.color = 'green'
                            done()
                        }, 2000)
                        
                    
                    }
                }
            })
            var app = new Vue({
                el:'#app',
                data:{
                    show: false
                },
                methods:{
                    handleBtnClick: function() {
                        this.show = !this.show
                    }
                }
            })
        </script>
    </body>
</html>