javascript - 重置 CSS 过渡不起作用(过渡结束问题)

Question

我有一个 div，我希望它表现出以下行为:

立即变为纯红色； 在 2 秒内淡出至 50% 的不透明度； 由特定事件触发时重复。

这是我放入回调中的代码，每 ~2 秒调用一次:

    currElem.style.transition = 'none';
    currElem.style.opacity = 1;
    currElem.style.transitionProperty = 'opacity';
    currElem.style.transitionDuration = '2s';
    currElem.style.opacity = 0.5;

但是，这不起作用。有帮助吗？

提前致谢。

Answer 1

我建议使用 CSS animations相反。

给你:

.box {
    background-color: tomato;
    width: 200px;
    height: 200px;
    opacity: 1;

  -webkit-animation: reduce_opacity 2s linear infinite;
     -moz-animation: reduce_opacity 2s linear infinite;
       -o-animation: reduce_opacity 2s linear infinite;
          animation: reduce_opacity 2s linear infinite;
}

@-webkit-keyframes reduce_opacity { from { opacity: 1; } to { opacity: 0.5; } }
   @-moz-keyframes reduce_opacity { from { opacity: 1; } to { opacity: 0.5; } }
     @-o-keyframes reduce_opacity { from { opacity: 1; } to { opacity: 0.5; } }
        @keyframes reduce_opacity { from { opacity: 1; } to { opacity: 0.5; } }

WORKING DEMO

infinite 关键字属于 animation-iteration-count定义动画循环播放次数的属性。

更新

正如您提到的通过 JavaScript 事件触发重复动画，您可以坚持使用 transition 并在事件处理程序中删除/添加某个类以实现效果:

.animate {
    -webkit-transition: opacity 2s linear;
       -moz-transition: opacity 2s linear;
        -ms-transition: opacity 2s linear;
         -o-transition: opacity 2s linear;
            transition: opacity 2s linear;
    opacity: 0.5;
}

JavaScript(jQuery 版本)

$('#reset-animation').on('click', function() {
    $('.box').removeClass('animate');

    setTimeout(function() {
        $('.box').addClass('animate');
    }, 100);
});

UPDATED DEMO .