由于使用svg制作圆形进度条，但是进度展示的太生硬，没有过渡圆滑的效果，所以使用 animate(在svg元素里可以查到) 元素标签，但

这样使用了，还是没有效果，我前端使用的 vue ，所以通过 @ 或 v-on 均无效

解决方法就是

声明这2个属性，在通过浏览器查看这2个事件绑定的区别

这就是区别，使用vue绑定事件加上Event结尾就行。

先声明下，我是使用svg的end事件遇到的问题，这种方法应该只能用于个例吧。

由于onend是属于被动触发的，所以这种方法只能自测看看，对于浏览器兼容没有测

这是成功绑定的事件图

至少，我这边解决这个问题了

SVG相关的网址：https://developer.mozilla.org/zh-CN/docs/Web/SVG

vue使用svg，animate事件绑定无效问题及解决方法的更多相关文章

  1. jQuery 新添加元素事件绑定无效

    jQuery中事件绑定,大多使用on就足够了. 但是对于新添加的元素 on 的绑定事件 会不起作用. 因为 append 中的 节点是在整个文档加载之后才添加的,页面并不会为未来的元素初始化添加点击事 ...

  2. android TextView多行文本(超过3行)使用ellipsize属性无效问题的解决方法

    这篇文章介绍了android TextView多行文本(超过3行)使用ellipsize属性无效问题的解决方法,有需要的朋友可以参考一下 布局文件中的TextView属性 复制代码代码如下: < ...

  3. vue.js的一些事件绑定和表单数据双向绑定

    知识点: v-on:相当于: 例如:v-on:click==@click ,menthods事件绑定 v-on修饰符可以指定键盘事件 v-model进行表单数据的双向绑定 <template&g ...

  4. vue样式操作与事件绑定

    Vue笔记 1 Vue实例 (VM) var vm = new Vue({    el:'#app', //挂载元素        //数据    data: {        title:'值', ...

  5. JavaScript之事件绑定多个序列执行方法

    //一种事件绑定多个方法:以加载事件为例 function addEventLoad(func,isLog) { var oldOnLoad = window.onload; if (typeof w ...

  6. jquery事件重复绑定的几种解决方法 （二）

    防止事件重复绑定共有4种方法: bind().unbind()方法 live().die()方法 off().on()方法 one()方法 一.bind().unbind()方法 bind();绑定事 ...

  7. jquery事件重复绑定的几种解决方法

    防止事件重复绑定共有4种方法: bind().unbind()方法 live().die()方法 off().on()方法 one()方法 一.bind().unbind()方法 bind();绑定事 ...

  8. 编写SqlHelper使用，在将ExecuteReader方法封装进而读取数据库中的数据时会产生Additional information: 阅读器关闭时尝试调用 Read 无效问题，解决方法与解释

    在自学杨中科老师的视频教学时,拓展编写SqlHelper使用,在将ExecuteReader方法封装进而读取数据库中的数据时 会产生Additional information: 阅读器关闭时尝试调用 ...

  9. table和div设置height:100%无效的完美解决方法

    刚接触网页排版的新手,常出现这种情况:设置table和div的高height="100%"无效,使用CSS来设置height:"100%"也无效,为什么会这样呢 ...

随机推荐

  1. Vue 源码解读（8）—— 编译器 之 解析（上）

    特殊说明 由于文章篇幅限制,所以将 Vue 源码解读(8)-- 编译器 之 解析 拆成了上下两篇,所以在阅读本篇文章时请同时打开 Vue 源码解读(8)-- 编译器 之 解析(下)一起阅读. 前言 V ...

  2. 大数据BI系统挖掘企业业务上的价值

    ​相信关注过我们的肯定知道BI是什么,但是老话常谈以防新朋友不知道BI的含义,BI(Business Intelligence)即商务智能,它是一套完整的解决方案,用来将企业中现有的数据进行有效的整合 ...

  3. 数据分析刚入门？这几个BI软件你一定得知道！

    在当前乃至未来5年的职场中,将取代你的可能不是 AI ,而是比你"更懂"数据分析的同事.毕竟,现在做什么都讲究"用数字说话",很多岗位在招聘JD中均给出了&qu ...

  4. 使用helm安装nfs-subdir-external-provisioner实现动态创建存储

    存储组件 nfs-subdir-external-provisioner 是一个存储资源自动调配器,它可用将现有的 NFS 服务器通过持久卷声明来支持 Kubernetes 持久卷的动态分配.此组件是 ...

  5. 【windows 操作系统】【CPU】用户模式和内核模式（用户层和内核层）

    所有的现代操作系统中,CPU是在两种不同的模式下运行的: 注意以下内容来自微软: windows用户模式和内核模式 运行 Windows 的计算机中的处理器有两个不同模式:用户模式 和内核模式 . 用 ...

  6. ssh执行命令或者脚本里最好先加上 source /etc/profile

    记: 写一次shell脚本,发现总提示 找不到JAVA_HOME .明明已经配了环境变量,并且java -version也已经能输出信息,但就是提示. 后来在 脚本中加入第一句代码 source /e ...

  7. C# NPOI导出数据到Excel

    1 public void Export() 2 { 3 //创建工作簿对象 4 IWorkbook workbook = new XSSFWorkbook(); 5 6 ExportStatisti ...

  8. 基于 vite2 + Vue3 写一个在线帮助文档工具

    提起帮助文档,想必大家都会想到 VuePress等,我也体验了一下,但是感觉和我的思路不太一样,我希望的是那种可以直接在线编辑文档,然后无需编译就可以直接发布的方式,另外可以在线写(修改)代码并且运行 ...

  9. 2022年官网下安装RabbitMQ最全版与官网查阅方法

    目录 一.Erlang环境部署 1.百度搜索"Erlang",或者访问网址:https://www.erlang.org/,找到DOWNLOAD双击进入. 2.找到支持的windo ...

  10. 高颜值测试报告- XTestRunner

    Modern style test report based on unittest framework. 基于unittest框架现代风格测试报告. 特点 漂亮测试报告让你更愿意编写测试. 支持单元 ...