vue中动态修改animation效果无效

已于 2023-06-08 14:38:48 修改
阅读量415 收藏
点赞数
文章标签： vue.js javascript 前端
于 2023-06-08 14:36:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53607765/article/details/131107161
版权

参考 vue中动态修改animation效果无效问题详情_vue.js_脚本之家

JS div内容滚动条自动上下来回滚动_div上下滚动_下一秒_待续的博客-CSDN博客

javascript - 自动滚动元素列表 - IT工具网

css实现自动滚动效果_css自动滚动_月色超冷的博客-CSDN博客

想实现列表自动滚动效果，animation 的时间不确定 想着多个列表看上去速度一样

需要知道div的高度  在vue中修改它

document.querySelector("#id.class")

一开始直接是 .style['animation']='name time ...'

如何动画就不动了

我找啊找

发现动画name 在渲染后名称变为 name-data-v-0825...，所以 这动画就没有

我在这只想修改时间

所以只改时间就ok了

我最后时间是根据 5秒 * 子元素个数  

高度话也容易 ，根据自己想法

.style['animation-duration']='100s'

weixin_53607765
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
通过GASP让vue实现动态效果实例代码详解
10-15
GASP是一个JavaScript动画库，它支持快速开发高性能的 Web 动画。GASP 使我们能够轻松轻松快速的将动画串在一起，来创造一个高内聚的流畅动画序列。这篇文章主要介绍了通过GASP让vue实现动态效果,需要的朋友可以参考下
vue中动态修改animation效果无效问题
qq_38783557的博客
04-09 2700
vue动态修改animation效果无效
vue中element组件样式修改无效的解决方法
08-28
下面小编就为大家分享一篇vue中element组件样式修改无效的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
聊聊Vue 中 title 的动态修改问题
10-16
主要介绍了 Vue 中 title 的动态修改问题，文中通过两种方案给大家介绍了title的传递问题 ,需要的朋友可以参考下
关于 Vue 引用 animate.css 动画 不起作用的问题（版本兼容性）神坑
wenfu814的博客
08-24 1994
1. Vue 官网引用的是 animate.css 3.5 版本 <link href="https://cdn.jsdelivr.net/npm/[email protected]" rel="stylesheet" type="text/css"> 2. 不能引用 animate.css 最新版本 例如：(4.0) <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ ajax/libs/animate.css/
【Vue】踩坑日记：Scoped下动画无效，曾经以为百利而无一害的Scoped，也有自己的限制
游坦之的博客
10-06 1414
​ 在开发的前期，我清晰的记得使用动画完成了图片放大的效果，当时还写了一篇博文上了热榜。可是过了几天之后，这个效果居然“失效了”，我百思不得其解。一度怀疑自己的代码写的有问题，在CSDN等各大博客平台上查找了很久也没找到解决方案。在偶然的尝试下，我发现是scoped影响了动画的效果。真是欲哭无泪，打死我都想不到是scoped的原因。从学习vue的时候就习惯性的在style后面加上scoped，为的是不影响其他组件。曾几何时，我一度以为scoped有百利而无一害。
vue中使用过渡动画失效的问题
mrqi122的博客
08-09 1801
例如 定义了 transform: translateX(-50%);，在 vue过渡中在使用transform: translateX(-50%)将失效。只有去掉css 中的transform: translateX(-50%);定义css 属性，再vue中定义过渡属性动画失效（opatcity除外）
关于vue内置transition组件的动画类添加失效
weixin_45696837的博客
01-27 2455
今天在用vue的内置组件transition时出现了一丢丢的小BUG，出现动画类没有加上的问题。不过我看了控制台的DOM结构后就发现，加了appear时其实一开始是有动画类加到DOM上的。但为什么后来没有呢？先不着急，我们先来看一下。 这个结构应该可以看的很明白。就是一个按钮和一个transition组件。 我们都知道transition动画类的加上移除是通过监听根节点DOM的出现和消失实现的。 那么清楚这一点就可以很明显地找到问题的解答方向 一开始DOM不存在而是直接创建，又因为有appear所以动画
解决Vue根组件设置transition失效的问题
weixin_43274097的博客
08-11 979
在router-view标签设置 key属性，并且确保是唯一的，这里我设置 :key=“$route.fullPath”这样直接设置会发现路由切换时并没有效果，但是你每次修改代码后保存刷新页面时却又能看到一次动画效果。修改后，transition动画就正常了。
vue动态设置animation
sunfan
04-05 1135
vue动态设置animation【金控】
在vue中动态修改css其中一个属性值操作
01-18
我就废话不多说了，大家还是直接看代码吧~ <!--此div的高度取屏幕可视区域的高度--> <h5>{{ msg }} ... msg: Welcome to Your Vue.js App, }; }, computed: { getClientHeight:function () { /
解决vue单页面应用中动态修改title问题
10-16
主要介绍了解决vue单页面应用中动态修改title问题,本文通过示例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue create-keyframe-animation js 执行 animation 动画
TGODS
11-20 372
js是没办法动态添加 animation 的动画操作的。 像购物车，点击加入，是从点击位置跳入购物车的动画，位置是不固定的，这样就没办法写动画。所以使用 create-keyframe-animation 插件动态添加动画 1、npm install create-keyframe-animation 在需要使用动画的组件中引入 import animations from 'create-keyframe-animation';//css3动画插件 2、定义一个变量，写好动画 // 动画运行参数 le
Vue------关于 Vue 引用 animate.css 动画 不起作用的问题（animate.css）
COCOLI_BK的博客
10-10 3550
Vue 官网引用的是 animate.css 3.5 版本!!!! 如果你直接采用 npm install animate.css ; 在引入： import animated from "animate.css" ; Vue.use(animated); 结果就是没有作用!!! 原因：两者版本兼容性问题导致动画不起作用！！！ 处理方法： 就是安装对应低版本的动画插件，比如官网引入的3.x的animate.css npm install [email protected] --sa
vue直接引用animate.css 动画不起作用问题
haosicx的博客
08-10 1092
场景（原因）： 由于vue官网引用的是animate.css 3.5版本，其无法向上兼容最新的animate.css版本，这就导致了直接npm install animate.css后，动画压根无法生效。 因此解决方案就是安装对应低版本的animate.css： 安装依赖：
关于animate 在Vue中没有生效问题
weixin_45907878的博客
01-12 1492
关于Vue.js无法使用animated.css问题 声明： 首先，目前官网https://animate.style/ 给的是 V4 版本，V4 版本进行了一些改进，改进了动画，并添加了新动画，应用 animate.css 类添加了前缀，默认为animate_ , 因此无法直接使用 下载以前版本：https://download.csdn.net/download/weixin_45907878/14122271 第一步：引入 <link rel="stylesheet" href="./lib
【vue】过渡动画总结
loyd3的博客
09-03 776
单元素/组件的过渡 使用transition 的封装组件，实现过渡效果，可以给任何元素和组件添加进入/离开过渡 条件渲染 (使用 v-if) 条件展示 (使用 v-show) 动态组件 组件根节点 例子： <div id="demo"> <button v-on:click="show = !show"> Toggle </button> <transition name="fade"> <p v-if="show">h
VUE前端面试知识点
03-31 284
1.sass/scss、less区别 1.1 编译环境不一样 Sass是在服务端处理的，以前是Ruby，现在是Dart-Sass或Node-Sass，而Less是需要引入less.js来处理Less代码输出CSS到浏览器，也可以在开发服务器将Less语法编译成css文件，输出CSS文件到生产包目录，有npm less, Less.app、SimpleLess、CodeKit.app这样的工具，也有在线编译地址。 1.2 变量符不一样，Less是@，而Scss是$。 1.3 Sass...
Spring Cloud Gateway直接管理Vue.js的静态资源
最新发布
wddblog的博客
04-28 603
1. 构建Vue.js应用像之前一样，构建你的Vue.js应用，并将生成的静态资源（位于dist目录）复制到Spring Boot项目的某个目录，比如。
vue 中 动态修改 background: url 路径
06-12
在 Vue 中，可以使用动态绑定的方式来修改 `background` 样式中的 `url` 路径。具体操作步骤如下： 1. 在模板中，使用 `v-bind` 或简写的 `:` 绑定 `style` 属性，并指定需要修改的 `background` 样式，例如： ```...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值