点击按钮重行执行动画

kerry丶

已于 2023-02-18 16:42:35 修改

阅读量203

点赞数

分类专栏：前端文章标签： javascript vue.js

于 2022-11-24 19:59:37 首次发布

本文链接：https://blog.csdn.net/qq_35886767/article/details/128024356

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在Vue移动端项目中，为了解决点击按钮重播动画的问题，原始的伪元素`:active`方法效果不理想。文章提出了通过监听触控事件(`touchstart`和`touchend`)来实现这一目标。当`touchstart`触发时，移除动画类，而`touchend`事件则添加动画类，以此达到点击按钮时重复动画的效果。

摘要由CSDN通过智能技术生成

项目场景：

vue写移动端项目中点击按钮重行执行动画需求

问题描述

点击按钮重行执行动画，使用伪元素:active的效果不太理想，动画实现非常短

解决方案：

通过 touch 事件来实现，在触发touchstart的时候移除动画类，touchend时添加动画类

<div 
	@touchstart="btnTouchStart"
	@touchend="btnTouchEnd"
></div>


const btnTouchStart = (e) => {
  e.target.parentNode.classList.remove('active')
}
const btnTouchEnd = (e) => {
  e.target.parentNode.classList.add('active')
}