关于Vue中动画周期函数v-on:enter以及done()的一些问题

最新推荐文章于 2022-08-18 20:20:31 发布
最新推荐文章于 2022-08-18 20:20:31 发布
阅读量3k 收藏
点赞数
分类专栏： emmmm一些笔记 文章标签： JavaScript vue 动画周期钩子函数enter done（） 个人思考笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/theV_nothing/article/details/83998613
版权
本文探讨了Vue中动画周期函数v-on:enter的使用问题，特别是done()函数的作用。作者遇到在设置过渡效果时，必须读取el.offsetWidth才能使过渡生效的疑惑，并通过探索发现这可能与Vue内部的异步机制有关。同时，通过实验理解了done()用于标记过渡完成，可以避免额外的1秒过渡。文章诚邀社区大佬提供更深入的见解。
摘要由CSDN通过智能技术生成

关于Vue中动画周期函数v-on:enter以及done()的一些问题

一、 问题

  1. 下面代码中enter函数部分，无法正常显示预期的过渡效果，必须添加任一获取el.offset 系列属性操作才会正常显示过渡效果；
  2. 下面代码在添加获取el.offsetWidth属性操作之后，过渡效果会持续两秒（前一秒运动，后一秒静止不动） 需要在enter函数中添加第二个参数done,在enter函数中调用done（） ，即可解决；
本人对其中原理百思不得其解，对done()函数一无所知，也没能查到相关资料，只能求助于社区大佬，还希望路过的大佬们给点提示
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./vueJs/vue-2.4.0.js"></script>
  <style>
    [v-cloak] {
      display: none;
    }
    .ba
最低0.47元/天 解锁文章
theV_nothing
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 11
    评论
专栏目录
vue js动画构函数中的参数done实质
Web前端开发工程师
10-30 775
在这里贴上代码，这是一个用vue框架js动画钩子结合velocity框架写的一个动态效果 问题来了这里钩子函数中的done参数表示什么意思？ 官网给出的解答是 先不着急看这个同步调用是什么意思我们把底下的测试代码。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l...
Vue基础知识学习笔记
m0_46400711的博客
07-13 288
vue基础知识学习笔记 常用指令、计算属性、生命周期、动画、自定义过滤器、组件、路由、vue-cli等等。
vue 动画
done1898的博客
02-19 120
一般动画配合v-if v-else 或则v-show 来实现，所有将要有动画效果的元素都包含在一个transition的组件中。 在该组件中，每个动画元素都包含6个阶段： 1.v-enter 2.v-enter-active 3.v-enter-to 4.v-leave 5.v-leave-active 6.v-leave-to 在v-enter-active和v-le...
解决：vue 钩子函数 done()的理解
qq_34345149的博客
02-14 8209
##发现当你使用js的定时器设置样式的时候，必须传入done方法，（可以不使用，也能达到目的，但是必须传） 代码如下：直接粘贴可用； ##注：里面声明了timer定时器属性，目的是为了防止快速点击button按钮定时器无法清除的问题，大家可以了解一下； &amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;gt; &amp;amp;amp;lt;html&amp;amp;amp;gt; &amp;amp;amp;lt;head&a
VueJs(6)---V-on指令
a8892117的博客
05-02 496
V-on指令 一、概述 v-on是用来绑定事件监听器，用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。 在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个$event属性：v-on:click="handle('ok', $event)"。 示例 ...
键值修饰符v-on:keyup.enter
weixin_30780649的博客
09-17 205
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>键值修饰符</title> </head> <body> <div id="app"> &l...
vue动画—通过钩子函数实现半场动画操作
10-14
2. `enter`: 入场动画开始时调用，常用于修改元素样式来实现动画效果，并且通常需要调用`done()`回调函数来结束动画。 3. `after-enter`: 入场动画结束后调用，通常用来清理动画相关的样式。 4. `leave`: 离场动画...
Vue2.X 过渡动画
cc常 的博客
03-17 262
Vue2.x 过渡动画给Vue控制的元素添加过渡动画给多个不同元素指定不同过渡动画保存过渡动画最终的效果第三方框架实现过渡动画自定义类名动画配合Animate.css实现过渡动画v-for 在过渡动画中使用同时给多个元素添加过渡动画解决过渡动画混乱 写在前面： 此博客记录自己学习vue学习笔记，如有侵权，联系删！ 学习来源： Vue + Vue-Cli 快速入门教程 李南江老师各平台账号： 微博：极客江南 微信公众号：李南江 腾讯课堂： 李南江 网易云课堂：李南江 给Vue控制的元素添加过渡动画 如何给
vue.js动画中的js钩子函数的实现
10-18
`enter`函数通常用于设置元素的最终状态以及动画效果。在这个例子中，`enter`函数首先通过`el.offsetWidth`强制浏览器重新布局，然后设置了`transform`属性为`translate(550px, 350px)`，并定义了`transition`属性为...
Vue半场动画中回调函数done不执行的问题
风夜岚的博客
11-23 423
Vue半场动画中回调函数done不执行的问题==先总结==:问题代码如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片创建一个自定义列表注释也是必不可少的导出与导入导出导入 先总结: transition标签内边的before-enter，enter，after-enter 是vue规定的 不要乱改 !! //这里边的before-enter，enter，after-enter 是vue规定的 不要乱改 <transition @before-enter="beforeEnter"
彻底明白VUE中的done参数和函数作用，不懂的请进来
wzj26638719的专栏
01-11 9248
最近在学习vue.js发现钩子函数这一块，有一个done函数，莫名奇妙难懂，网上翻遍了，整了3个多小时，才弄明白怎么回事。 所以特地写下一个超简单的示例供学习者理解参考。不多说，上代码：后面有图解 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">...
Vue中v-on的基础用法、参数传递和修饰符
yzq0820的博客
07-29 4166
一、v-on的基本用法使用v-on:click给button绑定监听事件以及回调函数，@是v-on:的缩写，也就是简写也可以使用@click。方法一般是需要写方法名加上()，在@click中可以省掉，如上述的加。二、v-on的参数传递三、v-on的修饰词.stop的使用，btn的click事件不会传播，不会冒泡到上层，调用event.stopPropagation()。.prevent调event.preeventDefault阻止默认行为。.enter监听键盘事件; .onc......
Vue动画-使用钩子函数实现半场动画(添加购物车之类的半场动画可用)
sxs7970的博客
03-04 458
动画钩子函数 v-on:before-enter:表示动画入场之前，此时，动画尚未开始，可以在 before-enter中，设置元素。开始动画之前的其实样式。 v-on:enter:表示动画，开始之后的样式，可以设置完成动画的结束状态 v-on:after-enter:表示动画完成后的状态 v-on:enter-cancelled:用于取消开始动画 添加购物车半场动画例子 &lt;transi...
vue基础之过渡效果
keep789的博客
08-22 388
在vue官方api中，有提到Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。详见vue过渡基础 提到过渡，就不得不说动画。二者的区别主要有两点：    过渡只有一组关键帧(开始、结束),动画可设置多组关键帧     过渡需要事件触发，动画不需要事件触发 在 CSS 过渡和动画中自动应用 class &lt;!DOCTYPE html&gt; &lt;html&gt...
vue中transition标签的使用（一）
差不少的博客
07-12 2919
transition to标签的使用 transition标签上的name要和需要用到的css样式的开头一致 官方一共提供了6个样式 注： css样式开头的sky是可以随意命名的，只需与transition标签上的name属性的值一致即可。 动画类之间不要使用其他类隔开，否则会失效。 自定义过渡class名 注： 自定义class动画会自动覆盖原有的动画 :duration 定义动画持续时间 :duration也可以单独设置进入和离开时间。 并且设置了可以有一定的延时作用（比如把enter的时间
v-on指令详解
qq_45021462的博客
11-04 1891
获取点击事件元素本身 < button type=“button” @click=“click1($event)”>按钮< /button> methods : { click1() { …} } console.log(e);//返回一个鼠标事件对象MouseEvent。 console.log(e.target);//通过对象的target来获取触发事件的对象。 console.log(e.clientX);//通过对象的target来获取鼠标的相对坐标值X。 &l.
Vue学习—深入剖析v-on指令
xun__xing的博客
09-04 1625
深入剖析v-on指令一、v-on指令1.使用2.为什么在 HTML 中监听事件?二、v-on修饰符1.事件修饰符1.stop2.prevent3.capture4.self5.once6.passive2.按键修饰符1.按键码3.系统修饰键4.exact 修饰符5.鼠标按钮修饰符 一、v-on指令 1.使用 v-on 指令可以监听 DOM 事件，并在触发时运行一些 JavaScript 代码 事件类型由参数指定 <div id="app"> <button v-on:click
VUE之过渡动画钩子函数+Velocity.js动画库
zuomengjia的博客
10-31 1619
前言 CSS实现方式 目前为止已经介绍了Vue过渡与动画实现方式，包含transition过渡类型动画和@keyframes类型动画。 JS钩子函数方式+第三方库 除了用CSS来实现vue的组件过渡与动画，还可以用JavaScript的钩子函数来实现，在钩子函数中直接操作DOM即可。正如之前所说，可以配合使用第三方 JavaScript 动画库，如 Velocity.js Velocity.js...
【Vue】Vue的过渡动画
早睡早起长头发的博客
08-18 1718
一、过渡动画 二、transition组件 三、transition的显示的CSS类名 四、transition的隐藏的CSS类名 五、互斥动画 六、设置动画过程中的监听回调 七、列表过渡动画
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值