Vue过渡&动画

Vue过渡&动画

vue动画

动画进入:

  • v-enter:动画进入之前的初始状态
  • v-enter-to:动画进入之后的结束状态
  • v-enter-active:动画进入的时间段

动画离开:

  • v-leave:动画离开之前的初始状态
  • v-leave-to:动画离开之后的结束状态
  • v-leave-active:动画离开的时间段

PS:第一、第二个是时间点,第三个是时间段
v-enter-tov-leave的状态是一样的。且一般来说v-enterv-leave-to的状态也是一致的

单元素

修改过渡类名的前缀 来把多个DOM元素的动画进行分开定义

transitionname属性:自定义别名(自动生成CSS过渡名)

transition元素作为单个元素/组件的过渡效果;transition只会把过渡效果应用到其包裹的内容上,其不会额外渲染DOM树,也不会出现在可被检查的组件层级中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../code/lib/vue.js"></script>
    <style>
        .v-enter,
        .v-leave-to {
            opacity: 0;
            transform: translateX(150px);
        }

        .v-enter-active,
        .v-leave-active {
            transition: all 0.8s ease;
        }

        .my-enter,
        .my-leave-to { 
            opacity: 0;
            transform: translateY(150px);
        }

        .my-enter-active,
        .my-leave-active {
            transition: all 0.8s linear;
        }
    </style>
</head>
<body>
    <div id="app">

        <input type="button" value="toggle1" @click="flag1=!flag1">
        <transition>
            <h5 v-if="flag1">第一个栗子</h5>
        </transition>

        <hr>

        <input type="button" value="toggle2" @click="flag2=!flag2">
        <transition name="my">
            <h6 v-if="flag2">这是一个H6第二个梨子</h6>
        </transition>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                flag1: false,
                flag2: false
            },
            methods: {}

        });
    </script>

</body>

</html>

请添加图片描述

使用第三方animate.css类库实现动画

Animate.css

transitionduration属性:duration - number | {enter: number, leave: number} 指定过渡的时间。默认情况下,Vue会等待过渡所在根元素的第一个transitionend或者animationend事件

    <script src="../../code/lib/vue.js"></script>
    <link rel="stylesheet" href="../../code/lib/animate.css">
        <input type="button" value="toggle3" @click="flag=!flag">
        <transition enter-active-class="animate__bounceIn" leave-active-class="animate__bounceOut" 
            :duration="200">
            <h3 v-if="flag">库里有各种类型的css</h3>
        </transition>

请添加图片描述


钩子函数实现半场动画

只有出场动画、没有离场动画,或相反的只有半场的动画。

动画的钩子函数

这八个钩子函数可以理解成是动画的生命周期

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <!-- DOM元素 -->
</transition>

举例:使用钩子函数模拟小球半场动画(加入购物车)

/* methods中方法具体使用 */
methods: {
    // 注意: 动画钩子函数的第一个参数:el,表示 要执行动画的那个DOM元素,是个原生的 JS DOM对象
    // 我们可以认为 , el 是通过 document.getElementById('') 方式获取到的原生JS DOM对象
    beforeEnter(el) {
        // beforeEnter 表示动画入场之前,此时,动画尚未开始,可以 在 beforeEnter 中,设置元素开始动画之前的起始样式
        // 设置小球开始动画之前的 起始位置
        el.style.transform = "translate(0, 0)"   // smyhvae提示:一开始的时候,让小球处于(0,0)的位置
    },
    enter(el, done) {
        // 【注意1】el.offsetWidth 这句话,没有实际的作用,但是,如果不写,出不来动画效果。可以认为 el.offsetWidth 会强制动画刷新
        el.offsetWidth
        // enter 表示动画 开始之后的样式,这里,可以设置小球完成动画之后的,结束状态
        el.style.transform = "translate(150px, 300px)" // smyhvae 提示:让小球从(0,0)移动到 (150px, 300px)
        el.style.transition = 'all 1s ease'

        // 【注意2】这里的 done, 起始就是 afterEnter 这个函数,也就是说:done 是 afterEnter 函数的引用
        done()
    },
    afterEnter(el) {
        // 动画完成之后,会调用 afterEnter
        // console.log('ok')
        // 动画结束后,让小球消失(直接让 flag 取反即可)
        this.flag = !this.flag  // 因为最开始的时候,小球就是处于消失的状态,这行代码可以让小球的动画重新开始
    }
}
/* 全代码↓ */
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

    <style>
        .ball {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="button" value="toggle" @click="flag=!flag">
        <transition 
            @before-enter="beforeEnter"
            @enter="enter"
            @after-enter="afterEnter"
            >
            <div class="ball" v-show="flag"></div>
        </transition>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                flag: false,
            },
            methods: {
                beforeEnter(el) {
                    el.style.transform = 'translate(0, 0)'
                },
                enter(el, done) {
                    el.offsetWidth
                    el.style.transform = 'translate(150px, 300px)'
                    el.style.transition = 'all 1s ease'

                    done()
                },
                afterEnter(el) {
                    this.flag = !this.flag
                }

            }
        });
    </script>
</body>
</html>

请添加图片描述


多个元素

相同标签的元素切换时,可以通过key属性设置唯一值来标记以让Vue区分它们,否则Vue为了效率只会替换相同标签内部的内容。

举例:btn切换

.btn-enter,
        .btn-leave-to {
            opacity: 0;
        }

        .btn-enter-active,
        .btn-leave-active {
            transition: all 2s ease;
        }

        button {
            width: 45px;
        }
<transition name="btn">
    <button @click="isEditing=!isEditing" :key="isEditing">{{isEditing ? 'save' : 'edit'}}</button>
</transition>

请添加图片描述
在“save”与“edit”按钮的过渡中,两个按钮都被重绘了,一个离开过渡的同时另一个开始过渡。

JS浏览器的回流与重绘(Reflow & Repaint)

  • 回流:元素的大小或位置发生改变(当页面布局发生改变的时候),触发了重新布局导致渲染树重新计算布局和渲染
    回流以视口大小来计算元素的位置与大小,即浏览器窗口尺寸变化也会引起回流
  • 重绘:只改变自身样式,不会影响到其他元素

※回流一定触发重绘,而重绘不一定会回流

–> 给btn设置绝对定位

button {
    width: 45px;
    position: absolute;
}

请添加图片描述

–> 给btn的transition设置mode=“out-in”

transitionmode属性:
in-out: 新元素先进行过渡,完成之后当前元素过渡离开
out-in: 当前元素先进行过渡,完成之后新元素过渡进入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <style>
        .btn-enter,
        .btn-leave-to {
            opacity: 0;
            /* transform: translateX(45px); */
        }

        .btn-enter-active,
        .btn-leave-active {
            transition: all 2s ease-in;
        }

        button {
            width: 45px;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="app">
        <transition name="btn" mode="out-in">
            <button @click="isEditing=!isEditing" :key="isEditing">{{isEditing ? 'save' : 'edit'}}</button>
        </transition>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                isEditing: false
            },
            methods: {},
        });
    </script>
</body>
</html>

请添加图片描述

举例:使用transition-group元素实现列表动画

在一个<ul>列表中,若想给指定的某个li添加动画效果,我们可以使用transition-group进行包裹

    <style>
        li {
            border: 1px dashed #999;
            margin: 5px;
            line-height: 35px;
            padding-left: 5px;
            font-size: 12px;
            width: 100%;
        }

        li:hover {
            background-color: hotpink;
            transition: all 0.8s ease;  /*鼠标悬停时,出现背景色。让这个背景色的出现,也加一个淡入的动画*/
        }

        .v-enter,
        .v-leave-to {
            opacity: 0;
            transform: translateY(80px);
        }

        .v-enter-active,
        .v-leave-active {
            transition: all 0.6s ease;
        }
    </style>

<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>

        <!-- <ul> -->
        <!-- 在实现列表过渡的时候,如果需要过渡的元素,是通过 v-for 循环渲染出来的,不能使用 transition 包裹,需要使用 transitionGroup -->
        <!-- 如果要为 v-for 循环创建的元素设置动画,必须为每一个 元素 设置 :key 属性 -->
        <transition-group>
            <li v-for="(item, i) in list" :key="item.id">
                {{item.id}} --- {{item.name}}
            </li>
        </transition-group>
        <!-- </ul> -->

    </div>

    <script>
        // 创建 Vue 实例,得到 ViewModel
        var vm = new Vue({
            el: '#app',
            data: {
                id: '',
                name: '',
                list: [
                    { id: 1, name: '赵高' },
                    { id: 2, name: '秦桧' },
                    { id: 3, name: '严嵩' },
                    { id: 4, name: '魏忠贤' }
                ]
            },
            methods: {
                add() {
                    this.list.push({ id: this.id, name: this.name })
                    this.id = this.name = ''
                }
            }
        });
    </script>
</body>

改进一:添加删除item的功能;(点击列表中的数据即可删除)
//增加 i索引并根据索引添加删除函数
        <!-- <ul> -->
            <transition-group>
                <li v-for="(item, i) in list" :key="item.id" @click="del(i)">
                    {{item.id}} --- {{item.name}}
                </li>
            </transition-group>
        <!-- </ul> -->
//在methods中添加del删除方法(使用数组中的splice删除函数(起始位置,删除的数量))
                del(i) {
                    this.list.splice(i, 1)
                }

改进二:我们发现当我删除第二个item时,第三个第四个item在往上移动过程会比较突兀。为了改进这个地方,我么可以给.v-move .v-leave-active加一些动画属性
        /* 下面的 .v-move 和 .v-leave-active 配合使用,能够实现列表后续的元素,渐渐地漂上来的效果 */
        .v-move {
            transition: all 0.6s ease;
        }
        .v-leave-active {
            position: absolute;
        }
transition-groupappeartag属性的作用

在上有代码基础上,给transition-group加上appear属性,这样的话,可以让transition-group包裹的所有DOM元素再刷新时,有淡入效果

//appear
        <ul>
            <!-- 在实现列表过渡的时候,如果需要过渡的元素,是通过 v-for 循环渲染出来的,不能使用 transition 包裹,需要使用 transitionGroup -->
            <!-- 如果要为 v-for 循环创建的元素设置动画,必须为每一个 元素 设置 :key 属性 -->
            <!-- 给 ransition-group 添加 appear 属性,实现页面刚展示出来时候,入场时候的效果 -->
            <!-- 通过 为 transition-group 元素,设置 tag 属性,指定 transition-group 渲染为指定的元素,如果不指定 tag 属性,默认,渲染为 span 标签 -->
            <transition-group appear>
                <li v-for="(item, i) in list" :key="item.id" @click="del(i)">
                    {{item.id}} --- {{item.name}}
                </li>
            </transition-group>
        </ul>

由于transition-group包裹的元素,会被默认套上一层<span>,虽然没有什么副作用,但为了符合代码规范,我们可以通过tag属性给transition-group包裹的元素套上一层<ul>
,然后把现有的<ul>注释掉就行了。

//appear + tag 此时transition-group等于一层ul
        <!-- 在实现列表过渡的时候,如果需要过渡的元素,是通过 v-for 循环渲染出来的,不能使用 transition 包裹,需要使用 transitionGroup -->
        <!-- 如果要为 v-for 循环创建的元素设置动画,必须为每一个 元素 设置 :key 属性 -->
        <!-- 给 ransition-group 添加 appear 属性,实现页面刚展示出来时候,入场时候的效果 -->
        <!-- 通过 为 transition-group 元素,设置 tag 属性,指定 transition-group 渲染为指定的元素,如果不指定 tag 属性,默认,渲染为 span 标签 -->
        <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>

/*列表元素动画全代码*/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <style>
        .container {
            width: 800px;
            margin: 0 auto;
        }
        .addIn {
            text-align: center;
            line-height: 30px;
        }
        .addIn input:last-child {
            margin-left: 15px;
        }
        
        li {
            width: 800px;
            list-style: none;
            border: 1px dotted #ccc;
            line-height: 35px;
            margin: 5px auto;
            font-size: 15px;
            padding-left: 20px;
        }

        li:hover {
            background-color: #bfa;
            transition: all 0.8s linear ;
        }

        .v-enter,
        .v-leave-to {
            opacity: 0;
        }

        .v-enter-active,
        .v-leave-active {
            transition: all 0.8s ease;
        }

        .v-move {
            transition: all 0.8s ease;
        }

        .v-leave-active {
            position: position;
        }
    </style>
</head>
<body>
    <div id="app">

        <div class="container">
            <div class="addIn">
                <label>
                    ID: 
                </label>
                <input type="text" v-model="id" placeholder="id">
    
                <label for="test">
                    name:
                </label>
                <input type="text" v-model="name" id="test" placeholder="name"> 
    
                <input type="button" value="添加" @click="add">
            </div>
        </div>

        <transition-group appear>
            <li v-for="(item, i) in list" :key="item.id" @click="del(item.id-1)">
                {{ item.id }} ---- {{item.name}}
            </li>
        </transition-group>
    </div>
    

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                id: '',
                name: '',
                list: [
                    {id: 1, name: '赵高'},
                    {id: 2, name: '秦桧'},
                    {id: 3, name: '严嵩'},
                    {id: 4, name: '魏忠贤'}
                ]
            },
            methods: {
                add() {
                    // console.log(this.list)
                    this.list.push({id: this.id, name: this.name})

                    this.list = this.list.sort((a,b) => parseInt(a.id) - parseInt(b.id))

                    this.id = this.name = ''
                    // console.log(this.list)

                },
                del(id) {
                    this.list.splice(id, 1)
                }
            },
        });
    </script>
</body>
</html>

列表元素动画


上例中有关label 中的for属性

for属性就是将label表单控件绑定在一起。for属性的值和表单元素的id值一样时,即可完成label标签与该表单元素的绑定。
最主要的差别: 点击文本时 表单控件是否获取焦点

  • 表单控件
    input、select、textarea、button和h5的datalist、keygen、output (其中当label标签和select标签绑定后,点击label标签文本内容,不能触发select标签)

placeholder 添加默认提示文字

    <label>
        ID: 
    </label>
    <input type="text" v-model="id" placeholder="未嵌套未使用for">

    <br>

    <label for="test">
        ID:
    </label>
    <input type="text" id="test" placeholder="未嵌套使用for"> 

    <br>

    <label>
        ID:
        <input type="text" placeholder="label中嵌套">   
    </label>

label


本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇

)">
下一篇>>