uni-app实现点击收藏红心动画效果 uni-app使用CSS3关键帧动画-uni-app-PHP中文网

能用，但需绕开ios微信webview对transform:scale()的兼容问题；应改用width/height+opacity组合实现红心点击动画，并通过$nexttick切换class强制重播，避免animation-fill-mode失效及js桥接性能损耗。

uni-app实现点击收藏红心动画效果 uni-app使用css3关键帧动画

uni-app里怎么用`@keyframes`做收藏红心点击动画

直接上结论：能用，但得绕开transform: scale()在iOS微信WebView里的兼容问题。uni-app本身不拦截CSS动画，问题出在底层WebView对transform硬件加速的处理差异，尤其iOS 14–15的微信内嵌浏览器常出现缩放卡顿或不触发。

实操建议：

用width/height + opacity组合替代scale()，虽略失真但稳定
动画时长控制在0.25s以内，避免微信JS线程阻塞导致点击反馈延迟
必须给<view class="heart"></view>加display: inline-block，否则width动画在部分Android机型上无效

@keyframes heart-bounce {
  0% { width: 20px; height: 20px; opacity: 0.7; }
  50% { width: 28px; height: 28px; opacity: 1; }
  100% { width: 20px; height: 20px; opacity: 0.9; }
}

uni-app中`click`事件触发后如何重置动画

常见错误是只改class，但CSS动画不会自动重播——因为DOM没变，浏览器跳过重绘。必须强制“打断”动画流。

正确做法（Vue 2/3均适用）：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

用this.$nextTick()确保DOM更新完成后再切换class
先移除动画class，再$nextTick后加回，触发重播
别用setTimeout延时，uni-app的createSelectorQuery在某些低端机上会延迟

toggleHeart() {
  this.isCollected = !this.isCollected;
  this.heartClass = 'heart';
  this.$nextTick(() => {
    this.heartClass = 'heart animated';
  });
}