代码之家 › 专栏 › 技术社区 › swinn

从“none”更改元素的显示将重播其动画[重复]

animation css3 html jquery

swinn · 技术社区 · 8 年前

这个问题已经有了答案:

Stop animation from replaying when parent switches from display:none to block 1个答案

观看下面的片段,您会注意到滑动动画在 .addClass 语句执行,第二次执行时 #test 的 display 设置为 initial (超时设置有助于查看问题):

$(() => {
  $('#test').addClass('animate');
	
  setTimeout(() => {
    $('#test').css({ display: 'none' });
    setTimeout(() => {
      $('#test').css({ display: 'initial' });
    }, 1000);
  }, 1000);
});

#test {
  position: relative;
  left: 0;
}

#test.animate {
  animation: move 1s ease forwards;
}

@keyframes move {
  100% {
    left: 100px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="test" src="https://cdn4.buysellads.net/uu/1/3332/1524843316-62666.png">

为什么要更改元素的 显示 属性来自 none 到一个可见的( 最初的 , block 等等)通过javascript会导致分配给元素的动画重播,我如何才能禁止它重播?

注:有 animation-fill-mode 设置为 forwards 是一项要求。

1 回复 | 直到 8 年前

muecas 8 年前

只需移除 animate 在第一个动画完成后初始化。

$(() => {
  $('#test').addClass('animate');
	
  setTimeout(() => {
    $('#test').addClass('pause').css({ display: 'none' });
    setTimeout(() => {
      $('#test').css({ display: 'initial' });
    }, 1000);
  }, 1000);
});

#test {
  visibility: hidden;
  position: relative;
  left: 0;
}

#test.animate {
  visibility: visible;
  animation: move 1s ease forwards;
}

#test.animate.pause {
  animation-play-state: paused;
}

@keyframes move {
  0% {
    display: none;
    left: 100px;
  }
  1% {
    display: inital;
    left: 0px;
  }
  100% {
    left: 100px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="test" src="https://cdn4.buysellads.net/uu/1/3332/1524843316-62666.png">

推荐文章

mikko · SwiftUI如何在不同堆栈中实现同一视图的平滑动画

1 年前

Nejib Afdhal · 如何在带有类名的react native中使用顺风动画?

1 年前

user54097 · 滚动菜单项上的导航栏动画文本徽标

1 年前

Simplicissimus · 如何使用javascript为svg转换计时

1 年前

LetsBeHappy · 高CPU的圆形渐变动画

1 年前

Toniq · css从上到中心设置动画

1 年前

Ongky Denny Wijaya · 绘制y=omega*x^2的动画,其中omega从-3到3不等

1 年前

Duck · 如何设置菜单从圆形到椭圆形的动画?

1 年前

MR Lappy · 提要动画最后出现空白

2 年前

Nithin Sai · 如何设置draggableScrollableSheet及其内容的动画?

2 年前