修改dataV-vue3 中的组件 装饰5 decoration5 的动画重复次数

dataV-vue3 文档

装饰 5 是一个具有动画效果的 背景线框
在这里插入图片描述
但是开发者 没有给我们 提供 动画重复次数的 配置项,只提供了单次动画时长,如果把单词动画时长设置的很长,动画的延展速度也会跟着变得很慢,不符合预期。

使用开发者工具,找到实现逻辑
在这里插入图片描述
发现是 svg 之下的 animate 在起作用,我们只要将 animate 中的 repeatCount 改成 1 既可以 实现动画只会 进行开头那一次

接下来使用 js 来解决问题:
onMounted() 中 写入以下代码:

const svgElement = document.querySelector('.dv-decoration-5 svg');
const animateElements = svgElement.querySelectorAll('animate');
animateElements.forEach(animate => {animate.setAttribute('repeatCount', '1');
});

即获取到 animate 对象并且 设置了 repeatCount 属性。

设置之后,动画只会进行一次,改写成功!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/742340.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用Mybatis-plus来完成多表联查

1、需要进行多表联查的表 电影表(t_film)、电影地区表(t_film_type)、电影分类表(t_film_region) 2、在项目中创建表的实体类 FIlm类、FilmType类、FilmRegion类 3、完善实体 (1)Data lombok依赖…

安装Mysql和Mycli插件

一、安装数据库 1.重定向生成配置文件 cat >/etc/yum.repos.d/mysql.repo <<EOF [mysql57-community] nameMySQL 5.7 Community Server baseurlhttp://repo.mysql.com/yum/mysql-5.7-community/el/7/x86_64/ enabled1 gpgcheck0 EOF 2.yum安装 yum -y install mysq…

数据结构——通讯录项目

1.通讯录的介绍 顺序表是通讯录的底层结构。 通讯录是将顺序表的类型替换成结构体类型来储存用户数据&#xff0c;通过运用顺序表结构来实现的。 用户数据结构&#xff1a; typedef struct PersonInfo {char name[12];char sex[10];int age;char tel[11];char addr[100]; }…

跨境电子商务支付与结算

一、跨境电子商务支付与结算的业务架构 跨境电子商务支付与结算的业务架构&#xff0c;结合跨境电子商务支付与结算的技术架构&#xff0c;其业务架构主要包括以下五大模块 &#xff08;1&#xff09;商户模块。商户模块包括虚拟账户、管理平台、多币种收银台、争议管理。 &…

【备战蓝桥杯系列】蓝桥杯国二选手笔记二:算法模版笔记(Java)

感谢大家的点赞&#xff0c;关注&#xff0c;评论。准备蓝桥杯的同学可以关注一下本专栏哦&#xff0c;不定期更新蓝桥杯笔记以及经验分享。本人多次参加过蓝桥杯&#xff0c;并获得过蓝桥杯国二的成绩。 算法模版笔记&#xff08;Java&#xff09; 这篇文章给大家分享我的蓝桥…

LeetCode 1315.祖父节点值为偶数的节点和

给你一棵二叉树&#xff0c;请你返回满足以下条件的所有节点的值之和&#xff1a; 该节点的祖父节点的值为偶数。&#xff08;一个节点的祖父节点是指该节点的父节点的父节点。&#xff09; 如果不存在祖父节点值为偶数的节点&#xff0c;那么返回 0 。 示例&#xff1a; 输入…

php apache 后台超时设置

最近在写一个thinkphp项目的时候&#xff0c;发现Ajax从后端请求数据时间比较长&#xff0c;大概需要45秒左右&#xff0c;但是一旦请求时间超过40s&#xff0c;页面就会超时500了&#xff0c;一开始以为是ajax请求时间不能太长&#xff0c;后来将Ajax请求改为同步且timeout设置…

2024长三角快递物流供应链与技术装备展览会(杭州站)

2024.7.8-10 杭州国际博览中心 科技创新&#xff0c;数字赋能 同期举办&#xff1a;数字物流技术展 新能源商用车及物流车展 电商物流包装展 冷链物流展 指导单位 国家邮政局发展研究中心浙江省邮政管理局中国快递协会 承办单位 上海信世展览服务有限公司 主办单位 浙江…

H5简约星空旋转引导页源码

源码名称&#xff1a;H5简约星空旋转引导页 源码介绍&#xff1a;一款带有星空旋转背景特效的源码&#xff0c;带有四个按钮 需求环境&#xff1a;H5 下载地址&#xff1a; https://www.changyouzuhao.cn/11655.html

数据结构:红黑树的模拟实现

目录 1、什么是红黑树&#xff1f; 2、红黑树的相关操作与实现 1、节点定义 2、查找操作 3、插入操作 1、cur为红&#xff0c;p为红&#xff0c;g为黑&#xff0c;cur存在且为红 2、cur为红&#xff0c;p为红&#xff0c;g为黑&#xff0c;u不存在/u存在且为黑 4、判断…

能发顶会!GNN结合LLMs的三大创新思路!新SOTA准确率提升10倍

LLMs在处理NLP任务方面表现出色&#xff0c;而GNNs在挖掘和分析复杂关系数据&#xff08;图数据&#xff09;方面展现出其卓越的能力。这种趋势催生了将这两种技术整合的研究兴趣&#xff0c;为解决更多领域的实际问题。GNN结合LLMs也逐渐成为了研究的热点。 GNNLLMs可以发挥二…

集智书童 | 炸裂 !轻量化YOLO | ShuffleNetv2与Transformer结合,重塑YOLOv7成就超轻超快YOLO

本文来源公众号“集智书童”&#xff0c;仅用于学术分享&#xff0c;侵权删&#xff0c;干货满满。 原文链接&#xff1a;炸裂 &#xff01;轻量化YOLO | ShuffleNetv2与Transformer结合&#xff0c;重塑YOLOv7成就超轻超快YOLO 随着移动计算技术的迅速发展&#xff0c;在移动…

ECharts饼图图例消失踩的坑

在使用Echarts的饼图时&#xff0c;当时做法是在图例数小于8时显示全部的图例&#xff0c;在大于8的时候显示前8个图例。于是用了两种不同的方式处理。导致出现切换时间后图例不显示的情况。 错误过程&#xff1a; 在进行图例生成时采用了两种不同的方式&#xff1a; ①如果…

打造你的HTML5打地鼠游戏:零基础入门教程

&#x1f31f; 前言 欢迎来到我的技术小宇宙&#xff01;&#x1f30c; 这里不仅是我记录技术点滴的后花园&#xff0c;也是我分享学习心得和项目经验的乐园。&#x1f4da; 无论你是技术小白还是资深大牛&#xff0c;这里总有一些内容能触动你的好奇心。&#x1f50d; &#x…

Rust生命周期和生命周期声明‘作用Missing lifetime specifier

Missing lifetime specifier&#xff1a;报错说明缺失声明周期声明 Rust 生命周期机制是与所有权机制同等重要的资源管理机制。 之所以引入这个概念主要是应对复杂类型系统中资源管理的问题。 引用是对待复杂类型时必不可少的机制&#xff0c;毕竟复杂类型的数据不能被处理器…

UDP连接树莓派时提高连接速度,降低卡顿感

背景 树莓派4B刷的是ubuntu20.4系统&#xff0c;使用win10自带的远程桌面连接和其连接&#xff0c;卡的一批&#xff0c;于是探索并记录下如何降低连接卡顿感 步骤一 点击显示选项&#xff0c; 降低显示配置和颜色深度&#xff1a; 步骤二 我的树莓派是通过电脑移动热点的方式…

Qt+FFmpeg+opengl从零制作视频播放器-13.打包为exe包发布软件

1.首先visual studio给生成程序添加桌面图标。 右键工程,添加新文件资源文件Resource.rc 选择导入文件,我这里导入了Player.ico文件。 添加后,在资源文件那里就可以看见ico文件。 然后编译release程序, 生成的可执行程序就带上了图标。 2.使用Qt 程序打包发布-windeployq…

AWS入门实践-AWS CLI工具的使用介绍

AWS CLI&#xff08;Amazon Web Services Command Line Interface&#xff09;是一个强大的工具&#xff0c;它允许您直接从命令行与AWS服务进行交互。这不仅可以加快许多任务的处理速度&#xff0c;而且还可以通过脚本自动化。 一、AWS CLI工具的安装 1、Windows 安装下载…

uniapp图片涂鸦插件(支持多种涂鸦方式,图片放大缩小)

工程地址https://gitee.com/geshijia/ct-graffiti ct-graffiti涂鸦组件使用说明 参考说明 参考链接&#xff1a;https://github.com/ylyuanlu/yl-graffiti 感谢作者的付出&#xff0c;给我提供了一些思路&#xff0c;并做了如下优化&#xff1a; 增加图片放大缩小移动功能添…

第十四届蓝桥杯蜗牛

蜗牛 线性dp 目录 蜗牛 线性dp 先求到达竹竿底部的状态转移方程 求蜗牛到达第i根竹竿的传送门入口的最短时间​编辑 题目链接&#xff1a;蓝桥杯2023年第十四届省赛真题-蜗牛 - C语言网 关键在于建立数组将竹竿上的每个状态量表示出来&#xff0c;并分析出状态转移方程 in…