vue.js知识点-transition的钩子函数应用（实例展示）

最新推荐文章于 2024-04-15 16:31:02 发布

挺哥的踩坑之旅

最新推荐文章于 2024-04-15 16:31:02 发布

阅读量1.7k

点赞数 1

分类专栏： # vue.js 文章标签： vue.js html5

本文链接：https://blog.csdn.net/Scott_zt/article/details/104816548

版权

vue.js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本小结通过transition的钩子函数实现小球半场动画

头条-静敏的编程秘诀-vue教程合集

知识点1：入场、出厂方法

beforeEnter
表示动画入场之前，此时，动画尚未开始，可以在beforeEnter中设置元素开始动画之前的起始样式
enter
表示动画开始之后的样式，这里可是设置小球完成动画之后的，结束状态
enter(el,done)
el:动画钩子函数的第一个参数：el，标识，要执行动画的DOM原始，是原生的JS DOM对象
done:实现动画立刻消失,这里的done就是afterEnter函数的引用
.offsetWidth:这句话没有实际作用，但不写，出不来动画效果,有点坑
afterEnter
动画完成之后会调用afterEnter

知识点2：v-on绑定监听事件

可以简写为@

示例展示

<body>
    <div id="app">
        <input type="button" value="加入购物车" @click="flag=!flag">

        <!-- //transition 动画包裹元素 -->
        <!-- v-on:  可以简写为 @ -->
        <!-- 借助transition的钩子函数实现半场动画 -->
        <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，标识，要执行动画的DOM原始，是原生的JS DOM对象
                //el是通过 document.getElementByID('') 的方式实现的
                beforeEnter(el) {
                    //表示动画入场之前，此时，动画尚未开始，可以在beforeEnter中设置元素开始动画之前的起始样式
                    el.style.transforem="translate(0,0)"

                },
                enter(el,done) {
                    // 下面这句话没有实际作用，但不写，出不来动画效果，是个坑
                    // 其实说明el.offsetWidth会强制刷新![在这里插入图片描述](https://img-blog.csdnimg.cn/20200312130424377.gif)
                    el.offsetWidth
                    //表示动画开始之后的样式，这里可是设置小球完成动画之后的，结束状态
                    el.style.transform="translate(150px,350px)"
                    el.style.transition=" all 1s ease"
                    // 实现动画立刻消失
                    // 这里的done就是afterEnter函数的引用
                    done()

                },
                afterEnter(el) {
                    // 动画完成之后会调用afterEnter
                    this.flag=!this.flag
                }
            },

        });
    </script>
</body>

<style>
        .ball {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: red;

        }
    </style>

效果
在这里插入图片描述

挺哥的踩坑之旅

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
vue.js知识点-transition的钩子函数应用（实例展示）

本小结通过transition的钩子函数实现小球半场动画头条-静敏的编程秘诀-vue教程合集知识点1：入场、出厂方法beforeEnter表示动画入场之前，此时，动画尚未开始，可以在beforeEnter中设置元素开始动画之前的起始样式enter表示动画开始之后的样式，这里可是设置小球完成动画之后的，结束状态enter(el,done)el:动画钩子函数的第一个参数：el，...
复制链接

扫一扫