凉薄非本意 2022-09-26 17:04 采纳率: 70%
浏览 43
已结题

css平移如何中途暂停

img


我想知道css的平移动画如何暂停呢？我百度看说用

animation-play-state:paused;

的，但是我这个平移是动态的，没有办法写在@keyframes里啊
我现在是在暂停的事件中获取下降的距离然后取消元素的平移属性，再把下降的距离赋给元素，但是这样会有一个问题就是当设备的运算处理能力不足时会看到一个明显的上拉动作（这里的上拉我知道是因为取消平移效果后元素会回到原来的位置，然后又赋值了新的距离，所以在运算能力不足的设备上这个上拉效果尤为明显）

  • 写回答

3条回答 默认 最新

  • MAXLZ 2022-09-26 17:19
    关注
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #box {
      top: 100px;
      position: fixed;
      width: 100px;
      height: 100px;
      background: red;
      animation: move 3s linear 0s infinite alternate;
    }
    
    .stop {
      animation-play-state: paused !important;
    }
    
    @keyframes move {
      from {
        left: 0;
      }
      to {
        left: calc(100% - 100px);
      }
    }
  </style>
</head>
<body>
<button id="btn">change animation</button>
<div id="box"></div>
<script>
  const box = document.getElementById('box')
  document.getElementById('btn').addEventListener('click', function () {
    if (box.classList.contains('stop')) {
      box.classList.remove('stop')
    } else {
      box.classList.add('stop')
    }
  })
</script>
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

问题事件

  • 系统已结题 10月6日
  • 已采纳回答 9月28日
  • 修改了问题 9月26日
  • 创建了问题 9月26日

悬赏问题

  • ¥15 mars2d在vue3中的引入问题
  • ¥50 h5唤醒支付宝并跳转至向小荷包转账界面
  • ¥15 算法题：数的划分，用记忆化DFS做WA求调
  • ¥15 chatglm-6b应用到django项目中，模型加载失败
  • ¥15 CreateBitmapFromWicBitmap内存释放问题。
  • ¥30 win c++ socket
  • ¥15 C# datagridview 栏位进度
  • ¥15 vue3页面el-table页面数据过多
  • ¥100 vue3中融入gRPC-web
  • ¥15 kali环境运行volatility分析android内存文件，缺profile