vue组件transition使用js钩子执行时间设置

最新推荐文章于 2024-04-15 16:31:02 发布
最新推荐文章于 2024-04-15 16:31:02 发布
阅读量756 收藏
点赞数
分类专栏： 前端项目中解决的问题 文章标签： vue javascript 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_25170255/article/details/116484088
版权
本文介绍在Vue项目中，如何利用transition组件创建动画效果，并解决js钩子执行时间过短导致动画不可见的问题。通过添加动画延迟样式及在enter钩子中更新元素状态来实现平滑动画。
摘要由CSDN通过智能技术生成

vue组件transition使用js钩子执行时间设置

今天在做vue项目的时候，需要写一个动画效果，就是点击实现领钱的一个动画效果，用到了vue组件transition动画，用的过程中遇到了一个问题，js钩子没有设置时间导致动画执行的时间太快，所以基本上看不到效果。下面是实现的代码.......

写了三个js钩子，动画执行之前，动画执行，动画执行之后

这样是可以实现动画的其实，但是执行时间太短，基本上看不到动画的效果，查阅各种资料，说是可以在标签上加上一个动画延迟的样式，于是我加上了样式

但是还是不太好用，最终查阅各种资料解决了这个问题，需要在enter也就是动画开始执行的时候加上一行代码，类似于更新状态 els.offsetWidth

至此问题全部解决，看一下效果吧，不太知道怎么整一个gif图片

 

小世界94
关注
专栏目录
前端框架Vue（14）—— 利用 vue 过渡效果（transition）+定时器 实现轮播图通用组件
ALLEN的博客
08-24 1万+
序论： 轮播图 相信都不会陌生，很多的网站都会有，而且实现的方式也是千变万化，可以利用封装好的 UI 库 （bootstrap），也可以原生的 JS 进行编写。但是其中，动画（transition）和定时器都是必不可少的。本文就是利用 vue 自带的 transition 动画过渡效果加上定时器编写轮播图。效果： 1、功能分析。从上面的效果图中看，有四个基本功能：1、自动的轮播的功能；
Vue执行动画(transition)
没得简介
03-18 882
Vue中的动画机制: 参考 Vue中的动画可以认为是有生命周期的: 下面前四个事件是元素进入中到完成进入 后四个是元素离开时到完全离开 <transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter" v-on:enter-cancelled="enterCancelled"
063_末晨曦Vue技术_过渡 & 动画之显性的过渡持续时间
LS_952754的博客
09-05 350
063_末晨曦Vue技术_过渡 & 动画之显性的过渡持续时间
42 vue3过渡和动画属性控制过渡时长
wgchen
12-07 1125
[动画] vue3过渡和动画并用小技巧构建一个过渡和动画并用的代码过渡和动画时长不一致的处理属性控制动画和过渡时长 构建一个过渡和动画并用的代码 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>demo</title&
Vue - 过渡与动画transition
热门推荐
梦缘的博客
09-27 1万+
这篇文章介绍Vue的过渡与动画，主要是用到组件transition。 作用范围：一般搭配v-if、v-show、动态组件、组件根节点来使用。在举栗子之前，我们先说说transition的钩子函数： v-enter：定义上半场过渡的初始状态；在过渡开始前被添加，在过渡开始时会被移除 v-enter-to：定义上半场过渡的结束状态；在过渡开始时被添加，在过渡完成时会被移除 v-enter-active...
vue-transition-components:Vue.js的过渡组件集合
05-15
`vue-transition-components` 是一个专门为Vue.js设计的过渡组件集合，它提供了一系列预定义的过渡效果，使开发者能够轻松地在项目中实现丰富的动画效果。 ### 安装与使用 要将`vue-transition-components`添加到...
vue组件 keep-alive 和 transition 使用详解
10-16
2. **`transition`组件**：`transition`主要用于实现Vue组件的过渡效果。它可以是CSS过渡、CSS动画或JavaScript钩子函数。`transition`不会渲染额外的DOM元素，仅对包裹的内容应用过渡效果。例如： ```html ...
vue 组件中使用 transition 和 transition-group实现过渡动画
10-16
本文给大家分享一下vue 组件中使用 transition 和 transition-group 设置过渡动画,总结来说可分为分为 name 版, js 钩子操作类名版, js 钩子操作行内样式版，本文给大家介绍的非常详细，具有一定的参考借鉴价值，...
vue transition 使用
YYYYYun的博客
07-22 180
transition <div id="demo"> <button v-on:click="show = !show"> Toggle </button> <transition name="fade"> <p v-if="show">hello</p> </transition>...
【Vue】使用 transition 标签实现单元素组件的过渡和动画效果（3）
看花容易绣花难
09-21 981
使用 transition 标签实现单元素组件的过渡和动画效果（3）
vue内置组件Transition的详解
最新发布
qq_44741577的博客
04-15 4314
会在一个元素或组件进入和离开 DOM 时应用动画。会在一个 v-for 列表中的元素或组件被插入，移动，或移除时应用动画。简单地说，就是当元素发生变化，比如消失、显示时，添加动画让它更自然过渡。它是vue内置组件，不需要引入注册就可以直接使用。通过name可以自定义的过渡类名。注意：里面只能有一个根组件，但使用v-if、v-else、v-else-if切换显示是可以的。如果想对列表中的元素设置过渡，可以使用。
transition
kamianlaidaa的博客
06-02 705
transition Transition 简介： Transition可以设置CSS 属性的过渡效果，它有以下几个属性。 transition-property用 nsition-timing-function用于指定过渡的类型 transition-property： 是用于指定应用过渡的属性名称，可以指定多个属性名称，多个属性名称之间用,分隔。 默认值为all也就是所有的元素都应用过渡效果。 想让容器的宽高有一个过渡的效果的代码： 于指定应用过渡属性的名称 ...
Transition
今夜几点睡
02-18 324
transition动画过渡 今天我们来讲 transition 动画过渡属性 从图中最左边的红色盒子是我们最初设置的盒子大小与背景颜色：红色，最右边的是我们后来设置的大小与背景颜色，中间则是两个盒子之间过渡的效果。 接下来我们来看下代码这一块，我们就用一个div来完成即可，我们在基础样式设置了宽高各150px的正方形，再在hover里面在设置一个宽高为300px，背景为绿色的正方形。如果我们先前没有设置 transition，效果则会是把鼠标放在红盒子上立马变成大的绿色
transition过渡动画
flyfish12_16的博客
06-22 498
transition语法格式：transition: property duration timing-function delay;    代码示例：transition:width 2s ease-in 500ms; 知识点一：transition-property 规定设置过渡效果的 CSS 属性的名称。          语法格式：transition-property
运用Git钩子自动更改最后一次Commit的提交时间
硫酸锌01的博客
02-23 1279
git-hook将工作日的提交转换到其他时间
vue路由过渡动画
weixin_39168052的博客
08-01 945
&lt;transition&gt;标签 想让路由有过渡动画，需要在&lt;router-view&gt;标签的外部添加&lt;transition&gt;标签，标签还需要一个name属性。 css过渡类名： 组件过渡过程中，会有四个CSS类名进行切换，这四个类名与transition的name属性有关，比如name=”fade”,会有如下四个CSS类名： fade-enter:进入过...
vue 内置组件transition（进入&离开过渡）的使用
逆风优雅的博客
06-10 8381
Vue 提供了 的封装组件，在以下情况下，可以给任何元素和组件添加进入/离开过渡。transitionProps：事件：用法： 元素作为单个元素/组件的过渡效果。 只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在可被检查的组件层级中。 案例一：css过渡： 效果图： 案例二：css动画 效果图： 除了使用vue默认的动画，v-enter,v-leave-to这种，我们还可以自定义类名。 transtion也可以通过内置的钩子实现，过渡和动画效果：
transition属性
weixin_57750091的博客
06-01 2964
transitionTransition概念transition-propertytransition-durationtransition-delaytransition-timing-function总结过渡的坑 Transition概念 Transition 可以设置 CSS 属性的过渡效果，它有以下几个属性。 transition-property 用于指定应用过渡属性的名称 transition-duration 用于指定这个过渡的持续时间 transition-delay 用于指定延迟过渡的时间
Vue子组件中解决Transition失效问题
"Vue.js中的过渡效果在子组件中出现失效问题，主要涉及Vue的`transition`组件和事件处理。子组件包含一个显示/隐藏的`div`元素，该元素在`v-if`指令控制下与`transition`结合，期望实现滑动淡入淡出效果。但实际操作...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小世界94

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值