java - 如何在java脚本或css中完成动画后使元素可拖动？

Posted 2023-05-08

【中文标题】java - 如何在java脚本或css中完成动画后使元素可拖动？

【英文标题】：how to make element dragable after completion of it's animation in java script or css?

【发布时间】：2021-10-26 11:33:03

【问题描述】：

我使用此代码为元素设置了动画

#h1

position: absolute;
animation: diagonal_h1 2s;
animation-play-state: paused;
animation-fill-mode forwards;


@keyframes diagonal_h1

    0%        transform: translatex(0px) translatey(0px) 
    100%      transform: translatex(-50px) translatey(-100px) 

我正在使用按钮播放动画。 但是当我尝试通过（interactive.js 库）使其可拖动时

const position =  x: 0, y: 0 

interact('#h1').draggable(
  listeners: 
    start (event) 
      console.log(event.type, event.target)
    ,
    move (event) 
      position.x += event.dx
      position.y += event.dy

      event.target.style.transform =
        `translate($position.xpx, $position.ypx)`
    ,
  
)

元素没有通过拖动移动。所以我删除了animation-fill-mode forwards;

通过这样做，元素是可拖动的，但问题是元素不会停留在其最终状态

请帮忙。

【参考方案1】：

当元素仍然具有该动画集时，它将保持其填充模式前向转换状态。

要解决这个问题，您可以在用户拖动时想要转换元素之前删除动画。

这是一个简单的 sn-p - 不使用库 - 它有一个元素动画，然后在几秒钟后翻译其位置而不删除动画和第二个元素动画，并且其位置在几秒钟后翻译相同秒，但动画被移除。

你会看到第一个元素改变了颜色但没有移动，第二个元素在几秒钟后移动。

const first = document.querySelector('.first');
const second = document.querySelector('.second');
setTimeout(function() 
  first.style.transform = 'translate(50px, 0)';
  first.style.color = 'red';
, 5000);
setTimeout(function() 
  second.style.animation = 'none';
  second.style.transform = 'translate(50px, 0)';
  second.style.color = 'blue';
, 5000);

.move 
  animation: move 1s linear 1;
  animation-fill-mode: forwards;


@keyframes move 
  100% 
    transform: translate(50px, 50px);
  

<div class="move first">FIRST ELEMENT</div>
<div class="move second">SECOND ELEMENT</div>