vue 过渡的坑

向右看齐 2021-12-23 00:41 249阅读 0赞

说一下自己使用vue过渡时爬的坑

第一

<transition v-for=" " key=" " @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">

<div> ... </div>

</transition>

<transiton-group tag=" ">

<div v-for=" " key= " " @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" >

.........

</div>

<transition-group>

分清上面两个过渡的不同. 虽然都用了v-for, 但 第一个 是单元素的过渡, 第二个 是列表过渡. 要搞清楚.

第二

就是关于afterEnter钩子. 上面第一种情况(即,单元素过渡中) 连续触发多个过渡, 有时afterEnter钩子不执行.

连续触发3个过渡 却只执行了2次aterEnter钩子

![1193396-20170728102733383-865544179.png][]

![1193396-20170728102746508-1599925771.png][]

![1193396-20170728102757149-432760644.png][]

![1193396-20170728102805524-1000432098.png][]

afterEnter钩子只执行了2次,这样就出问题了.

怎么解决呢 ? 我不使用afterEnter钩子, 在enter钩子中使用了定时器,设置延时时间跟过渡时间一样.

当然这不是一个好办法, 但至少解决问题了.

如果要真正的解决问题,还是得看vue源码, 看是钩子过渡是怎么实现的,然后去解决问题, 关键是本人现在看源码还有点困难.

![1193396-20170728101558461-1895194774.png][]

就这样解决了.

以上就是我在使用vue过渡中爬过的两个坑.

如果有大神帮解释一下vue过渡钩子的源码,或者用其他办法解决afterEnter钩子问题, 欢迎留言.

转载于:https://www.cnblogs.com/redgreenblue/p/7248817.html

[1193396-20170728102733383-865544179.png]: /images/20211220/03e48db85ecf43b4adeae3d6095ae5e9.png
[1193396-20170728102746508-1599925771.png]: /images/20211220/9e2478fe94e34eb898a908d282684ddb.png
[1193396-20170728102757149-432760644.png]: /images/20211220/eabb20a635ee40b6af5cd27760db775d.png
[1193396-20170728102805524-1000432098.png]: /images/20211220/642ee9a2cdac4b85b87e3e574145cf10.png
[1193396-20170728101558461-1895194774.png]: /images/20211220/ff01bdaba5bb45a7a79dd11058e547f1.png

发表评论取消回复

表情：

评论列表（有 0 条评论，249人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue状态过渡

状态过渡 * 概述 * 状态动画与侦听器 * 把过渡放到组件里 * 赋予设计以生命概述 Vue 的过渡系统提供了非常多简单的方法设置进入...

柔光的暖阳◎/ 2024年04月17日 05:38/ 0 赞/ 62 阅读

相关 Vue列表过渡

列表过渡 * 前言 * 列表的进入/离开过渡 * 列表的排序过渡 * 列表的交错过渡前言目前为止，关于过渡我们已经讲到： * 单个节...

忘是亡心i/ 2024年04月17日 05:35/ 0 赞/ 60 阅读

相关 Vue 过渡 & 动画

概述 Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具：在 CSS 过渡和动画中自动应用 class 可以配合使用

Love The Way You Lie/ 2023年07月01日 12:53/ 0 赞/ 10 阅读

相关 Vue 过渡效果的组件

目录 1. 单节点的过渡 1.1 应用场景 1.2 定义过渡效果的方式 -------------------- 1. 单

左手的ㄟ右手/ 2022年12月28日 01:59/ 0 赞/ 164 阅读

相关 vue过渡动画

vue 过渡动画可以分为两部分 1.vue内置类名：匿名动画，具名动画内置类名：进入进入前动画名-enter

￡神魔★判官ぃ/ 2022年11月29日 12:23/ 0 赞/ 262 阅读

相关 Vue初始渲染的过渡

初始渲染就是在页面刚出现或者刷新的时候实现一些过渡效果，而且默认状态肯定不能是隐藏的，否则无法使用初始渲染。若要使用初始渲染，必须给transition添加 appear

深藏阁楼爱情的钟/ 2022年10月19日 05:33/ 0 赞/ 170 阅读

相关 Vue_列表过渡

如果是列表的话，想要做动画，让列表在包裹在transition-group里面 <transition-group name='listcss'> <div v-fo

刺骨的言语ヽ痛彻心扉/ 2022年05月20日 23:29/ 0 赞/ 253 阅读

相关 VUE过渡（一)单元素过渡

VUE过渡（一)单元素过渡转载[https://cn.vuejs.org/v2/guide/transitions.html][https_cn.vuejs.org_v

叁歲伎倆/ 2022年01月29日 13:19/ 0 赞/ 278 阅读

相关 vue 过渡的坑

说一下自己使用vue过渡时爬的坑第一 <transition v-for=" " key=" " @before-enter="beforeEnter" @enter="

向右看齐/ 2021年12月23日 00:41/ 0 赞/ 250 阅读

相关 vue过渡动画之——过渡类名

过渡类名的使用 <transition name="fade"> <div class="el"></div> </transiton>

我不是女神ヾ/ 2021年12月10日 01:37/ 0 赞/ 377 阅读