js 温故而知新 webkitTransitionEnd 监听Transition动画结束事件

css3的过渡属性transition,在动画结束时,也存在结束的事件:webkitTransitionEnd;

注意:transition,也仅仅有这一个事件。

http://www.runoob.com/jsref/event-transitionend.html

vuejs代码片段:

 setTimeout(() => {
        this.wrap.classList.add(‘swipe-transition‘);
        this.swipeMove(-this.index * this.pageWidth);

        once(this.wrap, ‘webkitTransitionEnd‘, _ => {
          this.wrap.classList.remove(‘swipe-transition‘);
          // 李钊鸿注释的代码
          // this.wrap.style.webkitTransform = ‘‘;
          this.swiping = false;
          this.index = null;
           // 李钊鸿加入的代码:
          this.$store.dispatch(‘set_translateX‘,‘0‘)
        });
}, 0);
时间: 2024-08-24 13:20:36

js 温故而知新 webkitTransitionEnd 监听Transition动画结束事件的相关文章

监听css3动画结束事件-webkitAnimationEnd

当css3的animation完成一个动画,我们想让动画保持在终止的状态或其他一些事件,要怎么做呢 我们可以监听 webkitAnimationEnd 事件就可以 // 动画结束时事件 o.addEventListener("webkitAnimationEnd", function() { console.log("动画结束"); }) -webkit-animation动画有三个事件: 开始事件: webkitAnimationStart结束事件:  webki

js html 交互监听事件学习

事件处理程序(handler): HTML事件处理程序: <input type="button" value="Click Here" onclick="showMessage();" /> <script type="text/javascript"> function showMessage() { alert('Clicked!'); } JavaScript指定事件处理程序: <inpu

js/jquery 实时监听输入框值变化的完美方案:oninput &amp; onpropertychange

本文转载于 http://blog.163.com/lgh_2002/blog/static/44017526201341511112874/ Jquery绑定事件(bind和live的区别) js/jquery 实时监听输入框值变化的完美方案:oninput & onpropertychange js/jquery 实时监听输入框值变化的完美方案:oninput & onpropertychange 2013-05-15 11:01:12|  分类: jquery/javascrip |

JS,JQ及时监听input值的变化,MUI的input搜索框里的清除按钮的点击监听事件

JS: document.getElementById("input对象的ID").addEventListener('input',function(){ console.log("aaaaa"); }); JQ: $("input对象").bind("input  propertychange",function(){ console.log("aaaaa"); }): MUI 清除按钮的点击的监听:

js/jquery 实时监听输入框值变化的完美方案

js/jquery 实时监听输入框值变化的完美方案:oninput & onpropertychange 解释:先说jquery, 使用 jQuery 库的话,只需要同时绑定 oninput 和 onpropertychange 两个事件就可以了,示例代码:$('#username').bind('input propertychange', function() { $('#content').html($(this).val().length + ' characters');});

JS移动端如何监听软键盘回车事件

移动端经常项目中会有搜索之类的功能,一般实现的是按搜索按钮进行搜索,如果要像PC端一样实现按回车键进行搜索该怎么实现呢? 方法很简单,就是在搜索框的input外面套一个form标签  注意点:form标签一定得添加 action属性(可设置为空) <form action=""><input type="text" name="search" /></form> 移动端软键盘的回车会触发form的submit事

复选框 省市区 联动(监听input的change事件)

需求:省市区三级包含复选框按钮以及文字描述.点击文字显示对应的下级地区,点击复选框选择对应的下级区域勾选. 分析:监听input的change事件当点击复选框省  选择对应的第一个市区,同时默认选中第三级区域的第一个.同理监听span或者label(因为label与input的搭配使用) 辅助:后台提供省市区的数据: 两种方式: A:后台直接给dom结构(后台写好基本构架,前段自己在后台code填写需要的dom,class,方便前端开发) B:后台直接给前段一个json数据,前段自己遍历.(和后

微信浏览器返回刷新,监听微信浏览器返回事件,网页防复制

以下代码都经过iphone7,华为MT7 ,谷歌浏览器,微信开发者工具,PC端微信验证.如有bug,还请在评论区留言. demo链接:https://pan.baidu.com/s/1c35mbjM 密码:5yyf 1.移动端微信浏览器返回刷新事件,在返回后的页面上加上以下代码: <script type="text/javascript"> $(function () { var isPageHide = false; window.addEventListener('p

监听元素属性改变事件的方法

一.onchange事件只在键盘或者鼠标操作改变对象属性,且失去焦点时触发,脚本触发无效.(就是说你在输入框中输入完内容,输入完了,然后鼠标点别的地方触发该事件)二.oninput事件oninput 事件在用户输入时触发.不支持JS等赋值改变的元素属性.该事件在 <input> 或 <textarea> 元素的值发生改变时触发.(也就是说,不用输入完,边输入边触发该事件)①但是,这个方法是HTML5中的标准事件,IE9以下的浏览器是不支持oninput事件的.②使用时,还需要oni