在單個元素上設置多個動畫時，逐個觸發它們

Question

我想在手機上的單個元素上設置多個動畫，一個接一個地觸發它們。 我通過under方法實現了這一點，但有2個問題：

1. 我需要准確的位置和尺寸，所以我使用top bottom width height 。 但我知道使用這些屬性，瀏覽器需要再次渲染，因此效率不高。

2. 在第二個動畫中，雖然我設置了animation-fill-mode: forwards ，但仍然需要設置0%關鍵幀以確保第二個動畫起點位於第一個動畫終點上。

感謝更有效的方法。

我的演示

HTML：

<button id="first">first</button>
<button id="second">second</button>
<div class="moon"></div>

CSS：

.first {
  animation-name: first;
}

.second {
  animation-name: second;
}

@-webkit-keyframes first {
  100% {
    height: 2.5rem;
    width: 2.5rem;
    left: 4.1rem;
    bottom: 11.7rem;
  }
}

@-webkit-keyframes second {
  0% {
    height: 2.5rem;
    width: 2.5rem;
    left: 4.1rem;
    bottom: 11.7rem;
  }
  100% {
    height: 4rem;
    width: 4rem;
    left: 5.8rem;
    bottom: 10.5rem;
  }
}

JS：

var $moon = $('.moon');
$('#first').click(function() {
  $moon.addClass('animated first');
});
$('#second').click(function() {
  $moon.addClass('animated second');
});

Answer 1

您可能想嘗試使用JQuery關鍵幀插件，可以在此處下載：

https://github.com/Keyframes/jQuery.Keyframes

然后，您可以像這樣初始化一組變量，例如高度寬度頂部和左側：

var $moon = $('.moon'),
    newHeight = '0',
    newWidth = '0',
    newTop = '0',
    newLeft = '0';

然后，對於點擊，您可以嘗試每次點擊的動態變量每次點擊增加40？

$('#first').click(function() {
    newHeight = $moon.height() + 40+'px';
    newWidth = $moon.width() + 40+'px';
    newTop = $moon.position().top + 80+'px';
    newLeft = $moon.position().left + 80+'px';

    $moon.removeClass('first');
    $moon.removeClass('second');

    $.keyframe.define([{
        name: 'first',    
        '0%': {'height': $moon.height()+'px',
             'width': $moon.width() +'px',
             'left': $moon.position().left+'px',
             'top': $moon.position().top+'px'
                },
        '100%': {'height': newHeight,
                 'width': newWidth,
                 'left': newLeft,
                 'top': newTop
                }
    }]);
  $moon.addClass('first');
});

$('#second').click(function() {          
    newHeight = $moon.height() + 40+'px';
    newWidth = $moon.width() + 40+'px';
    newTop = $moon.position().top + 80+'px';
    newLeft = $moon.position().left + 80+'px';

    $moon.removeClass('first');  
    $moon.removeClass('second');  

    $.keyframe.define([{
        name: 'second',  
        '0%': {'height': $moon.height()+'px',
             'width': $moon.width()+'px',
             'left': $moon.position().left+'px',
             'top': $moon.position().top+'px',
                },  
        '100%': {'height': newHeight,
                 'width': newWidth,
                 'left': newLeft,
                 'top': newTop,
                }
    }]);
    $moon.addClass('second');
});

以為你可以嘗試一下，Leo。