vue教程——12 vue动画

最新推荐文章于 2024-08-04 16:33:59 发布

Dormiveglia-flx

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量135

点赞数

分类专栏： Vue教程文章标签： javascript css vue.js html5 es6

本文链接：https://blog.csdn.net/sugerfle/article/details/116789849

版权

Vue教程专栏收录该内容

14 篇文章 1 订阅

订阅专栏

vue教程——12 vue动画

一 vue动画入门 `<transition>`

vue动画的用法：<transition>+元素的删除或者添加

元素的添加或删除操作有：

v-if（条件渲染）
v-show（条件展示）
动态组件
在组建的根节点上，并且被vue实例DOM方法触发，如appendTo方法把组件添加到某个根节点上

具体操作的原理是：
vue监听到元素的插入或者删除的时候，会执行动画效果

<html>
    <head>
        <meta charset='utf-8'>
        <title></title>
        <!-- 引入vue.js -->
        <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
        <style>
            /* v-enter 是进入之前，元素的起始状态 */
            /* v-leave-to 是动画离开之后，离开终止的状态，此时，元素动画已经结束 */
            /* v-enter-active 入场动画的时间段*/
            /* v-leave-active 离场动画的时间段*/
            .v-enter-active,
            .v-leave-active {
                transition: all .8s ease;
            }
     
            .v-enter,
            .v-leave-to{
                transform: translateX(100px);
                opacity: 0;
            }
            /* 可以设置不同的进入和离开动画 */
            /* 设置持续时间和动画函数 */
            .slide-fade-enter-active,
            .slide-fade-leave-active {
                transition: all .3s ease;
            }
     
            .slide-fade-enter, .slide-fade-leave-to{
                transform: translateY(100px);
                opacity: 0;
            }
        </style>
    </head>
    <body>
        <div id='app'>
            <input type="button" value="toggle" @click="flag = !flag">
            <!-- 需求：点击按钮使h3显示，再点击隐藏 -->
            <!-- 1、不使用动画 -->
            <h3 v-if="flag">这是h3标签——无动画</h3>
            <!-- 2、使用过渡类名实现动画 -->
            <transition>
                <h3 v-if="flag">这是h3标签——有动画</h3>>
            </transition>
            <transition name="slide-fade">
                <p v-if="flag">hello</p>
            </transition>
            
        </div>
    
    </body>
    <script>
        // 实例化vue对象
        let vm = new Vue({
            // 绑定对象
            el:'#app',
            data:{
                flag:false
            },
            methods:{
                
            }
        })
    </script>
</html>

二使用第三方动画库

2.1 下载第三方动画库，举例使用的是animate.css

animaate 官网：https://animate.style/

2.2 `transition` 中使用第三方动画库

1 设置进入过程和离开过程的类，enter-active-class="" ，leave-active-class="" 。

2 使用 :duration=“毫秒值” 来统一设置入场和离场时候的动画时长。

3 作用的元素上要加一个基本类animated才能生效

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <title></title>
        <!-- 引入vue.js -->
        <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
        <link rel="stylesheet" href="animate.css">
    </head>
    <body>
        <div id='app'>
                <input type="button" value="toggle" @click="flag = !flag">
                <transition enter-active-class="bounceIn" leave-active-class="bounceOut">
                        <!--加了基本类animated-->
                    <h3 v-if="flag"  class="animated">hello vue.js</h3>
                    
                </transition>
        </div>
    
    </body>
    <script>
        // 实例化vue对象
        let vm = new Vue({
            // 绑定对象
            el:'#app',
            data:{
                flag:false
            },
            methods:{
                
            }
        })
    </script>
</html>

三列表动画效果

在使用列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的，
不能使用transition包裹，需要使用transitionGroup

给transition-group设置appear获得入场动画

给transition-group设置tag属性，指定transition-group渲染为什么样的元素，如果不指定，默认渲染为span元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <title></title>
        <!-- 引入vue.js -->
        <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
        <style>
            li{
                border:1px dashed red;
                margin:5px;
                line-height: 35px;
                padding-left:5px; 
                width: 100%;
            }
            
            .v-enter,
            .v-leave-to{
                
                transform: translateY(100px);
                opacity: 0;
            }
            .v-leave-active,
            .v-enter-active{
                transition: all 0.5s ease;
            }
            li:hover{
                background: lightcoral;
                transition: all 0.8s ease;
            }
            .v-move{
                transition: all 0.6s ease;
            }
            .v-leave-active{
                position: absolute;
            }
        </style>
    </head>
    <body>
        <div id='app'>
            <div>
                <label>ID:
                    <input type="text" v-model="id">
                </label>
                <label>Name:
                    <input type="text" v-model="name">
                </label>
                <input type="button" value="添加" @click="add">
            </div>
            <p>点击删除</p>
            
                <transition-group appear tag="ul">
                    <li v-for="(item,i) in list" :key="item.id" @click="del(i)">
                        {{item.id}}---{{item.name}}
                    </li>
                </transition-group>
                
        </div>
    
    </body>
    <script>
        // 实例化vue对象
        let vm = new Vue({
            // 绑定对象
            el:'#app',
            data:{
                list:[
                    {id:1,name:'张三'},
                    {id:2,name:'李四'},
                    {id:3,name:'王五'},
                    {id:4,name:'赵六'}
                ],
                id:'',
                name:''
            },
            methods:{
                add(){
                    if(this.id == '' || this.name == ''){
                        alert("不能为空")
                        return
                    }
                    this.list.push({id:this.id,name:this.name})
                    this.id = this.name = ''
                },
                del(i){
                    this.list.splice(i,1)
                }
            }
        })
    </script>
</html>

四 vue通过JS钩子函数实现半场动画

全场动画与半场动画
全场动画：初始状态到结束状态的动画 + 结束状态到初始状态的动画。两场动画
半场动画：初始状态到结束状态的动画

  
<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <title></title>
        <!-- 引入vue.js -->
        <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
        <style>
            .ball{
                width: 20px;
                height: 20px;
                border-radius: 50%;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div id='app'>
            <input type="button" value="快到碗里来" @click="flag = !flag">
            <transition 
                v-on:before-enter="brforeEnter"
                v-on:enter="enter"
                @after-enter="afterEnter"
            >
                <div class="ball" v-if="flag"></div>
            </transition>
        </div>
    
    </body>
    <script>
        // 实例化vue对象
        let vm = new Vue({
            // 绑定对象
            el:'#app',
            data:{
                flag:false
            },
            methods:{
                // 动画钩子函数：el,表示 要执行动画的那个DOM元素，是一个原生的js对象
                brforeEnter(el){
                    //berareEnter表示动画入场之前，此时，动画尚未开始，可以在beforeEnter中设置开始动画之前的样式
                    el.style.transform = "translate(0,0)"
                },
                enter(el,done){
                    // 表示动画 开始之后的样式，这里，可以设置小球完成动画之后的样式，结束状态
                    el.offsetWidth //得写这个，会强制动画刷新
                    el.style.transform = "translate(150px,450px)"
                    el.style.transition = 'all 1s ease' 

                    done()  //这里的done 其实就是afterEnter，官方文档说这个必须调用一下
                },
                afterEnter(el){
                    // 动画完成之后
                    console.log("ok")
                    this.flag = false
                }
            }
        })
    </script>
</html>

	有篇不错的文章，大家可以参考一下：https://www.cnblogs.com/sundance123/p/14498496.html

Dormiveglia-flx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue教程——12 vue动画

vue教程——12 vue动画一 vue动画入门 ``二使用第三方动画库2.1 下载第三方动画库，举例使用的是animate.css2.2 ``一 vue动画入门 <transition>vue动画的用法：<transition>+元素的删除或者添加元素的添加或删除操作有：v-if（条件渲染）v-show（条件展示）动态组件在组建的根节点上，并且被vue实例DOM方法触发，如appendTo方法把组件添加到某个根节点上具体操作的原理是：vue监听到
复制链接

扫一扫