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','')
});
}, );

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

  1. js判断是否安装某个android app,没有安装下载该应用(websocket通信,监听窗口失去焦点事件)

    现在经常有写场景需要提示用户下载app, 但是如果用户已经安装,我们希望是直接打开app. 实际上,js是没有判断app是否已经安装的方法的,我们只能曲线救国. 首先,我们需要有call起app的sc ...

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

    JS: document.getElementById("input对象的ID").addEventListener('input',function(){ console.log ...

  3. js进阶 12-6 监听鼠标滚动事件和窗口改变事件怎么写

    js进阶 12-6 监听鼠标滚动事件和窗口改变事件怎么写 一.总结 一句话总结:滚动事件scroll(),浏览器窗口调整监听resize(),思考好监听对象. 1.滚动事件scroll()的监听对象是 ...

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

    移动端经常项目中会有搜索之类的功能,一般实现的是按搜索按钮进行搜索,如果要像PC端一样实现按回车键进行搜索该怎么实现呢? 方法很简单,就是在搜索框的input外面套一个form标签  注意点:form ...

  5. JS控制全屏,监听退出全屏事件

    实现方案 //进入全屏 function requestFullScreen(de) { if(de.requestFullscreen){ //W3C de.requestFullscreen(); ...

  6. 微信浏览器返回刷新,监听微信浏览器返回事件,网页防复制,移动端禁止图片长按和vivo手机点击img标签放大图片

    以下代码都经过iphone7,华为MT7 ,谷歌浏览器,微信开发者工具,PC端微信验证.如有bug,还请在评论区留言. demo链接:https://pan.baidu.com/s/1c35mbjM ...

  7. vue 定义全局函数,监听android返回键事件

    vue 定义全局函数,监听android返回键事件 方法一:main.js 注入(1)在main.js中写入函数Vue.prototype.changeData = function (){ aler ...

  8. 50-用Python监听鼠标和键盘事件

    转自:https://www.cnblogs.com/qiernonstop/p/3654021.html 用Python监听鼠标和键盘事件 PyHook是一个基于Python的“钩子”库,主要用于监 ...

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

    需求:省市区三级包含复选框按钮以及文字描述.点击文字显示对应的下级地区,点击复选框选择对应的下级区域勾选. 分析:监听input的change事件当点击复选框省  选择对应的第一个市区,同时默认选中第 ...

随机推荐

  1. vs code 在windows10 64bit系统配置python开发环境

    一.搭建 python 环境 在 VSC 中点击 F1 键,弹出控制台,输入 ext install 界面左侧弹出扩展窗格,输入python,确认,开始搜索下载发布者为Don Jayamanne 的 ...

  2. Netty源码学习(零)前言

    本系列文章将介绍Netty的工作机制,以及分析Netty的主要源码. 基于的版本是4.1.15.Final(2017.08.24发布) 水平有限,如有谬误请留言指正 参考资料 the_flash的简书 ...

  3. SpringBoot动态数据源

    1.原理图 2.创建枚举类 /** * 存数据源key值 */ public enum DataSourceKey { master,salve,migration } 3.创建自定义注解类 /** ...

  4. 新疆大学ACM-ICPC程序设计竞赛五月月赛(同步赛)- 猴子排序的期望

    链接:https://www.nowcoder.com/acm/contest/116/F来源:牛客网 题目描述 我们知道有一种神奇的排序方法叫做猴子排序,就是把待排序的数字写在卡片上,然后让猴子把卡 ...

  5. Quaternion Euler

    geometry_msgs::Quaternion orientation = map->info.origin.orientation;      tf::Matrix3x3 mat(tf:: ...

  6. 前端中 width 的获取

    这篇文章其实是在了解 viewport 的过程中发现这些概念容易混淆做了个小小的总结.viewport的首要关键是宽度的获取,宽度的计算有下面几个属性和方法: clientWidth offsetWi ...

  7. 每天一个linux命令8之grep高级篇

    1语法       grep -[acinv] '搜索内容串' filename -a 以文本文件方式搜索-c 计算找到的符合行的次数-i 忽略大小写-n 顺便输出行号-v 反向选择,即找 没有搜索字 ...

  8. 【微信】2.微信小程序开发--官方开发工具使用说明

    承接第一篇 =============================================== 关于微信小程序开发使用IDE,曾经自己动摇过. 到底是采用 微信官方小程序开发工具 WebS ...

  9. 学号20175313 《数据库MySQL(课下作业,必做)》第十周

    目录 一.题目要求 二.需求分析 三.关键代码以及运行结果截图 任务一 任务二 任务三 任务四 四.代码实现过程中遇到的问题及其解决方法 五.码云链接 六.心得体会 一.题目要求 下载附件中的worl ...

  10. TP5使用PHPMAILER发送邮件

    TP使用PHPMAILER发送邮件 1.申请一个SMTP服务的邮箱. 我申请的是smtp.163.com的服务,注意SMTP服务密码不是登陆密码,需要单独设置 2.下载phpmailer类库文件htt ...