由于使用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. 还在被数据分析报告折磨?Smartbi让你解放双手

    数据分析报告贯穿了企业经营的时时刻刻,方方面面. 数据分析报告最常用于汇报分享:团队需要分享.沟通,数据分析师需要洞察数据.分析结果分享给企业领导.团队同事.大众媒体及更多的利益相关方. 数据分析报告 ...

  2. Iterator迭代

    今天在牛客网练题的时候,出现了Iterator的题,实在想不起来这是什么,于是去查阅了相关资料,顺便自己去IDEA试了一下.总结了一些相关知识如下: 什么是Iterator? 我们来看看菜鸟教程里的解 ...

  3. .net 底层运行机制

    1.           CLR C#.NET 平台下,代码是怎么运行的 源代码-->托管模块-->程序集-JIT->编程CPU指令 1.1     在.NET框架下,首先将源代码编 ...

  4. SQL:查询时给表起别名

    Q 有两个表student.score,查询前一个表的id.name列,后一个表的total列,查询结果通过两个表的id连接起来 要求 使用别名st和sc替换表名进行查询 A SELECT st.id ...

  5. WPS:Excel删除指定行以后的所有行

    首先定位到你的1000行,然后选中第1000行按住Shift,再同时按住Ctrl加向下的方向键,最后删除即可了.

  6. Laravel自定义错误提示,自定义异常类提示,自定义错误返回信息,自定义错误页面

    方法一 新增CustomException.php文件 App\Exceptions\CustomException.php <?php namespace App\Exceptions; us ...

  7. 浅析XML

    概述XML文档结构 每个XML文档都分为两部分:序言(Prolog)和文档元素(或文档节点) 例子:写一段XML然后简单分析一下 <?xml version="1.0" en ...

  8. GO语言基础(结构+语法+类型+变量)

    GO语言基础(结构+语法+类型+变量) Go语言结构 Go语言语法 Go语言类型 Go语言变量       Go 语言结构 Go 语言的基础组成有以下几个部分: 包声明 引入包 函数 变量 语句 &a ...

  9. test 分支强制替换master 分支的办法

    test分支改动太多,并且master 分支好久没有改动.直接合并到master 分支的话,会产生很多冲突,几十个文件,修复冲突会花很多时间,并且是没有意义的.因此只能使用test 分支强制替换. 代 ...

  10. vctl 使用镜像/换源/mirrors

    ️ 更新:事实证明,以下方法仅对部分镜像有效 换源 VMware16新增vctl管理容器,使用时发现是从docker.io拉取镜像,国内连接网速较慢.官方似乎并没有给出换源方法. 解决方法:从指定的U ...