Vue学习笔记——动画实现

最新推荐文章于 2022-09-06 16:43:10 发布

淡忘～雨季

最新推荐文章于 2022-09-06 16:43:10 发布

阅读量329

点赞数 1

分类专栏： Web前端学习文章标签： vue.js reactjs node.js html5 javascript

本文链接：https://blog.csdn.net/weixin_43900407/article/details/105508385

版权

Web前端学习专栏收录该内容

33 篇文章 1 订阅

订阅专栏

5.1 过渡类名实现动画

Vue元素实现动画需要在transition标签组件中，在元素标签中使用条件渲染 (使用 v-if)或者条件展示 (使用 v-show)，最后在样式中使用过渡类名设置动画的效果。
过渡的类名：
.v-enter：进入过渡的开始状态例： .v-enter v-if为true初始状态时候效果
.v-enter-to：进入过渡生效时的状态 .v-enter-active v-if true
.v-enter-active：进入过渡生效时的状态入场动画的时间段
.v-leave：离开过渡的开始状态
.v-leave-to：离开过渡的结束状态例：.v-leave-to v-if为false离开动画时候的效果最后的效果
.v-leave-active 离开过渡生效时的状态 .v-leave-active v-if false
在这里插入图片描述

5.2 自定义过渡类名

在transition标签中设置name属性，指定自定义过渡类名，然后在style中设置样式的时候就可以使用name中设置的属性名作为前缀，默认采用的前缀是.v-。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义的过渡类名</title>
    <script src="../lib/vue-2.4.0.js"></script>
    <style>
        /* 默认的过渡类名 */
        .v-enter,
        .v-leave-to {
            opacity: 0;
            transform: translateX(180px);
        }
        .v-enter-active,
        .v-leave-active {
            transition: all 5s ease-in-out;
        }
        /* 自定义过渡类名 */
        .my-enter,
        .my-leave-to {
            opacity: 0;
            transform: translateY(200px);
        }
        .my-enter-active,
        .my-leave-active {
            transition: all 5s ease;
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="button" @click = "flag = !flag" value="默认过渡类名">
        <!-- 没有定义name 默认使用的过渡类名就是v -->
        <transition>
            <h3 v-if="flag">Hello Vue.js</h3>
        </transition>
        <hr>
        <input type="button" value="自定义过渡类名" @click = "flag2 = !flag2">
        <!-- 自定义过渡类名 在transition组件的name中定义  样式中写动画过渡直接写自定义的类名前缀即可，不需要使用v- -->
        <transition name="my">
            <h3 v-if="flag2">Hello Vue.js</h3>
        </transition>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data: {
                flag:false,
                flag2:false
            },
            methods:{}
        });
    </script>
</body>
</html>

5.3 钩子函数实现动画半场

使用过渡类名设置动画的时候，实现的是全动画，从enter到leave，如果需要实现半场动画，就需要使用钩子函数。
v-on 可以缩写为@ <transition @before-enter = “beforeEnter”>
动画入场的三个生命周期函数 before-enter enter after-enter 需要绑定钩子函数例如：@before-enter = “beforeEnter”，beforeEnter就是钩子函数，需要在Vue实例中的methods声明和定义函数
动画离开的三个生命周期函数 before-leave leave after-leave
钩子函数的注意事项：
1.在enter或者leave中设置调用done()回调函数，并且在动画的最后调用，过渡才会立即完成，这个done()函数实际上就是afterEnter或者leaveEnter的调用
2.enter函数在设置动画之前，加上 el.offsetWidth/offsetHeight/offsetLeft/offsetRight才会有动画效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>钩子函数实现动画半场实例</title>
    <script src="../lib/vue-2.4.0.js"></script>
    <style>
        .ball {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: red;
        }
    </style>
</head>
<body>
    <!-- 使用过渡类名实现动画 都是实现全部动画，也就是从enter到leave  如果显示半动画那么就需要使用钩子函数 -->
    <div id="app">
        <input type="button" value="钩子函数" @click = "flag = !flag">
        <!--在transition中声明JavaScript钩子  v-on可以简写为@ 
        动画入场的三个生命周期函数  before-enter  enter  after-enter 需要绑定钩子函数
        动画离开的三个生命周期函数  before-leave  leave   after-leave
        -->
        <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: {
                // 动画钩子函数的第一个参数都是el 也就是原生的JS DOM对象 document.getElementById()
                beforeEnter(el) {
                    // beforeEnter()表示动画入场之前，此时动画尚未开始，设置元素的初始状态
                    el.style.transform = 'translate(0,0)';
                },
                enter(el,done) {
                    // enter()表示动画开始之后的样式，这里设置完成动画之后的结束状态
                    // 如果需要有动画效果，必须在这之前加上 el.offsetWidth/offsetHeight/offsetLeft/offsetRight
                    el.offsetWidth;
                    el.style.transform = 'translate(150px,350px)';
                    el.style.transition = 'all 2s ease';
                    // 在enter的最后 调用done()回调函数，过渡会立即完成  实际上这个done就是afterEnter()函数的引用
                    done();
                },
                afterEnter(el) {
                    // 动画完成之后调用afterEnter()函数  
                    this.flag = !this.flag;
                }
            }
        });
    </script>
</body>
</html>

5.4 列表动画

列表实现过渡的时候，如果使用v-for渲染界面，就不能够使用transition标签，需要使用的是transition-group。
transition-group 设置appear属性实现页面刚展出来时候的效果
transition-group 设置tag属性指定渲染的元素，如果不指定，默认采用的span元素由于span元素里面放块级元素不规范，所以推荐改变为其他的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表动画</title>
    <script src="../lib/vue-2.4.0.js"></script>
    <style>
        ul li {
            width: 100%;
            border: 1px dashed red;
            line-height: 40px;
            padding-left: 5px;
        }
        li:hover {
            background-color: skyblue;
            transition: all 0.5s ease-in;
        }
        /* 过渡动画 */
        .v-enter,
        .v-leave-to {
            opacity: 0;
            transform: translateY(80px);
        }
        .v-enter-active,
        .v-leave-active {
            transition: all 2s ease;
        }
        /* 删除列表的动画效果 .v-move 和 .v-leave-active 配合使用 */
        .v-move {
            transition: all 0.6s ease;
        }
        .v-leave-active {
            /* 前面删除的列表元素 后面的元素可以产生上浮的效果 因为绝对定位是不占位置的 */
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="app">
        <div>
            <label >
                Id:
                <input type="text" name="" id="" v-model="id">
            </label>
            <label>
                Name:
                <input type="text" v-model="name">
            </label>
            <input type="button" @click = "add" value="添加">
        </div>
        <!-- 遍历列表数据 -->
        <ul>
            <!-- 列表实现过渡的时候，如果使用v-for渲染界面，就不能够使用transition标签，需要使用的是transition-group -->
            <!-- transition-group 设置appear属性 实现页面刚展出来的时候效果 -->
            <!-- transition-group  设置tag属性指定渲染的元素，如果不指定，默认采用的span元素 由于span元素里面放块级元素不规范，所以推荐改变为其他的元素 -->
            <transition-group appear tag = "ul">
                <li v-for="(item,i) in list" :key = "item.id" @click = 'del(i)' >
                    {{ item.id }} ---- {{ item.name }}
                </li>
                <!-- 注意： 如果需要为v-for设置动画，那么就需要为每一个元素设置 :key 属性-->
            </transition-group>
        </ul>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                id : '',
                name : '',
                list : [
                    {id: 1, name: '张三'},
                    {id: 2, name: '李四'},
                    {id: 3, name: '王五'}
                ]
            },
            methods:{
                // 数组中最常用的两个方法 添加push(数组元素)  删除splice(删除的索引,删除的个数)
                add() {
                    this.list.push({ id: this.id, name: this.name });
                },
                del(i) {
                    this.list.splice(i,1);
                }
            }
        });
    </script>
</body>
</html>

淡忘～雨季

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue学习笔记——动画实现

5.1 过渡类名实现动画Vue元素实现动画需要在transition标签组件中，在元素标签中使用条件渲染 (使用 v-if)或者条件展示 (使用 v-show)，最后在样式中使用过渡类名设置动画的效果。过渡的类名：.v-enter：进入过渡的开始状态例： .v-enter v-if为true初始状态时候效果.v-enter-to：进入过渡生效时的状态 .v-enter-a...
复制链接

扫一扫