重置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動畫 。

干得好：

.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; } }

工作演示

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);
});

更新的演示 。