在 elementUI 标签上添加 animationend 事件无效问题

已于 2023-08-29 15:37:47 修改
阅读量120 收藏
点赞数
文章标签： elementui css
于 2023-08-29 15:28:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010749677/article/details/132562594
版权 
<el-radio-button
  class="hvr-wobble-horizontal"
  @animationend="animationendFn"
>

这样给一个element组件绑定事件是不能触发的，除非是他封装好的预留事件，想要在他的组件上触发自己定义的事件或者其他没有被他封装预留的原生事件，需要在事件后面添加 .native属性

<el-radio-button
  class="hvr-wobble-horizontal"
  @animationend.native="animationendFn"
>
1752321720
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html怎么为标签添加动画效果,CSS3使用AnimationEnd为同一个元素添加多个动画效果...
weixin_39559097的博客
06-03 866
webkitAnimationEnd#div{ width:200px; height:200px; background:#f60; margin:100px auto;}.fade{ -webkit-animation: fadeOut 2s 1 ease-in-out;}.change{ -webkit-animation: transform 1s 2 ease; }@-webkit-ke...
ElementUI Tag组件实现多标签生成的方法示例
10-16
在Vue.js框架中，ElementUI库提供了一个名为`Tag`的组件，用于创建标签功能，非常适合于文章分类、产品标签等场景。本文将详细介绍如何利用ElementUI的`Tag`组件实现多标签的生成方法。 首先，我们需要在Vue项目中...
js 监听css3动画的执行,animation动画暂停
qq_40591925的博客
03-21 4110
uniapp里： CSS 动画播放时，会发生以下三个事件： animationstart -CSS 动画开始后触发 animationiteration -CSS 动画重复播放时触发 animationend -CSS 动画完成后触发 @animationstart='animationstart' @animationiteration='animationiteration' @animationend ='animationend' 其他方式： var c...
CSS动画@animationend
共同进步
07-24 512
CSS 中的动画类似于 flash 中的逐帧动画，表现细腻并且非常灵活，使用 CSS 中的动画可以取代许多网页中的动态图像、Flash 动画或者 JavaScript 实现的特殊效果。这里感兴趣的可以去了解针动画是什么。
04.Vue3 过渡与动画
John是橘红的博客
05-07 941
Vue3 过渡与动画 1. 使用 Vue 实现基础的 CSS 过渡与动画效果 过渡与动画的差别 过渡：元素状态缓慢改变的过程 动画：一个元素运动的情况 1.1 vue 实现动画效果 用 class 类名实现动画效果 先写一个动画样式 <style> @keyframes leftToRight { from { transform: translateX(-100px); } to { transform
动画animationend 事件在活动红包雨中的应用
时清云的博客
12-30 643
最近搞了一个类似于红包雨的活动，研究了一下红包雨的实现方式。其中animationend 事件在 CSS 动画完成后触发，这个是我首次接触到的，所以就准备记录下来。 红包雨代码如下： <template> <div class="ser_home"> <ul class="red_packet" id="red_packet"> <template v-for="(item, index) in liParams"> &
微信小程序动画解析以及transitionend重复 animationiteration animationend失效问题解析
ITzhongzi的博客
09-16 3500
github项目代码 github项目代码 https://github.com/MrITzhongzi/small_routine_components/tree/master/5.danmu_component transitionend重复问题 首先你要知道，bindtransitionend监听的是小程序的过渡属性，就是正在变化的属性，每有一个属性过渡完成，就会触发一次。 例如： 一下这个会触发两次， 因为有 translateY和opacity两个属性在渐渐变化。 var animati
骨架屏 Skeleton
fu64343434的博客
06-07 1377
数据回来之前是显示骨架结构等数据回来之后替换成真实数据 在包裹骨架结构的template上写上#template意思为会渲染名字为template的标签包含的内容，而真实数据结构就是标签名为template的结构，骨架屏是在请求数据库数据未回来之前 显示的html结构，称之为骨架，这样做是为了更好的用户体验。，初始值状态是在data里定义的，初始为true，等数据请求回来改为false。骨架屏就会被自动替换成真实数据渲染的DOM结构 所以当你。标签包裹起来的就是用骨架屏的地方，的时候不妨加一句话，
在elementui中Notification组件添加点击事件实例
01-22
//函数作用域问题 this.$notify({ title: 通知消息, position: bottom-right, dangerouslyUseHTMLString: true, message: `号码：${telNo}</i></p>`, duration: 0, type: warning, onClic
Vue + Elementui实现多标签页共存的方法
10-16
主要介绍了Vue + Elementui实现多标签页共存的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
input标签内容改变的触发事件介绍
12-09
onchange事件在内容改变（两次内容有可能相等）且失去焦点时触发；onpropertychange事件是实时触发，每增加或删除一个字符就会触发，通过js改变也会触发该事件，但是该事件是IE专有。 2. oninput事件与...
解决vue elementUI 使用el-select 时 change事件的触发问题
01-18
如下所示： 请选择 change=selectChange()> ...我们需要的是选择之后才触发，但是这样写你会发现，页面初始化的时候会触发多次，选择之后又会触发多次，原因是我们用错了标签，应该用 @change=”selectChange()
animation动画结束后无法再次执行的问题
AZHELL的博客
12-28 3377
首先这里有一个结论：想要解决这个问题，我们只能选择监听animationend事件，其他的我们以为的可以解决的方案都是不可行的。 1、页面中的元素 &amp;lt;div class=&quot;st_apples&quot;&amp;gt; &amp;lt;!-- 动画会作用在这个span上 --&amp;gt; &amp;lt;span data-value=&quot;&quot;&amp;gt;&amp;lt
vue2.x过渡(transition)与动画(animationend)
想搞全栈的前端
06-01 3498
transition Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡 条件渲染 (使用 v-if) 条件展示 (使用 v-show) 动态组件 组件根节点 示例： <div id="demo"> <button v-on:click="show = !show"> Toggle </butto...
针对animationend和transitionend多次执行的问题解决方案
weixin_43118811的博客
12-14 952
** 针对animationend和transitionend多次执行的问题解决方案 ** 对于animationend事件来说的话，如果我们在外层添加这个事件监听，如果监听元素里面还有动画，则里面元素动画结束也会执行这个animationend事件。所以我们可以这样做： if(e.target === this) { console.log('end'); } 或者 if(e.targ...
vue 组件过渡动画
weixin_43294560的博客
02-15 2356
搭配标签消失/出现(v-show、v-if)的淡入淡出效果 1、在要过渡的标签外层包裹 <transition name='x> xx </transition> (1) 在style中写: //设置淡出,以及淡出时间 .x-enter,.x-leave-to{ opacity:0; } .x-enter-to,.x-leave{ o...
css3用AnimationEnd判断动画是否完成， css3在动画完成后执行事件
热门推荐
kongjiea笔记
08-16 8万+
用css3的animation完成一个动画，当只有这个动画完成时才执行令一个事件，比如让动画保持在终止的状态或其他一些事件。我们该怎么办呢。  第一种方法：  用计时器，设定一个和动画时长一样的time，过time事件去执行这个函数。  setTimeout(function(){ },time);  第二种方法：  当-webkit-animation动画结束时有一个webkitAni
css 结束动画执行下个动画,css3用AnimationEnd判断动画是否完成， css3在动画完成后执行事件...
weixin_36480510的博客
08-04 2755
用css3的animation完成一个动画，当只有这个动画完成时才执行令一个事件，比如让动画保持在终止的状态或其他一些事件。我们该怎么办呢。第一种方法：用计时器，设定一个和动画时长一样的time，过time事件去执行这个函数。setTimeout(function(){ },time);第二种方法：当-webkit-animation动画结束时有一个webkitAnimationEnd事件，只要监...
vue3组件传参之v-model
最新发布
qh1112的博客
06-25 401
vue3组件传参之v-model,以及自定义UI组件实现Input输入框数据的双向绑定
elementUI给表格加右键事件
05-30
要给 ElementUI 的表格加上右键菜单，可以使用以下步骤： 1. 在表格上添加 `@contextmenu.prevent` 事件监听器来阻止默认的右键菜单弹出，同时在 `el-table` 上添加一个 `ref` 引用，方便后续操作： ```html <template> <div @contextmenu.prevent> <el-table ref="table" :data="tableData" style="width: 100%"> <!-- 表格列定义 --> </el-table> </div> </template> ``` 2. 在 `mounted` 钩子函数中，给表格绑定 `@contextmenu` 事件监听器，同时传入事件对象： ```javascript mounted() { const tableEl = this.$refs.table.$el; tableEl.addEventListener('contextmenu', this.handleContextMenu); }, methods: { handleContextMenu(event) { event.preventDefault(); const contextMenu = this.$refs.contextMenu; contextMenu.style.top = event.clientY + 'px'; contextMenu.style.left = event.clientX + 'px'; contextMenu.style.display = 'block'; }, }, ``` 在上面的代码中，我们获取到表格的 DOM 元素，并在其上绑定了 `contextmenu` 事件监听器，监听右键事件。然后在 `handleContextMenu` 方法中，我们阻止了右键菜单的默认弹出，并获取了右键菜单的 DOM 元素，并设置其 `top` 和 `left` 样式来定位菜单的位置，并将其 `display` 样式设置为 `block` 来显示菜单。 3. 在右键菜单组件（可以是 `el-dropdown`）上添加 `ref` 引用，方便后续操作： ```html <template> <div ref="contextMenu" style="display: none;"> <el-dropdown> <span class="el-dropdown-link">右键菜单</span> <el-dropdown-menu> <el-dropdown-item>菜单项一</el-dropdown-item> <el-dropdown-item>菜单项二</el-dropdown-item> <el-dropdown-item>菜单项三</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </div> </template> ``` 在上面的代码中，我们给右键菜单的最外层包裹了一个 `div` 元素，并在其上添加了 `ref` 引用，方便后续操作。然后在 `el-dropdown` 组件上定义了菜单项。 4. 在组件销毁时解绑 `contextmenu` 事件监听器： ```javascript beforeDestroy() { const tableEl = this.$refs.table.$el; tableEl.removeEventListener('contextmenu', this.handleContextMenu); }, ``` 在上面的代码中，我们在组件销毁前解绑了 `contextmenu` 事件监听器，以免出现内存泄漏等问题。 这样，我们就可以给 ElementUI 的表格加上右键菜单了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值