頁面加載延遲的角度JS動畫

我試圖在我的應用程序主屏幕上設置動畫標誌，所以在2秒鐘後，徽標淡入並在淡入淡出完成後開始一個循環動畫。頁面加載延遲的角度JS動畫

我想在這樣的控制器中加入超時：

$timeout(function(){ 
    $scope.animationClass = 'animateOn'; 
});

，然後觸發動畫類時添加到DOM。

但是我認爲最好把這個動畫延遲代碼放在指令中，因爲它會分離代碼並使其可重用。

我只是想知道是否有更簡單的方法來做到這一點，因爲我是新來Angular JS動畫。

編輯：

我做了一個延遲後添加類的指令。這很好，但有一個更容易的選擇？請看下圖：

.directive('animationDelay', function($animate,$timeout) { 
    return function(scope, elem, attr) { 
     $timeout(function() { 
      $animate.addClass(elem, 'my-animate'); 
     }, attr.animationDelay); 
    }; 
});

調用使用：

<img animation-delay="3000" id="mainLogo" src="img/logo.svg" class="homeLogo" />

感謝

來源

2016-03-04 JamesG

CSS3語法提供屬性延遲動畫，動畫延遲

可設置延時達到您想要的數量，在類中聲明樣式，並將該類分配給元素。您可以使用相同的「我的動畫」類，並在其中包含動畫延遲More info

如果要在ng-show屏幕上顯示元素後顯示效果，angular會爲動畫提供庫，ngAnimate

來源

2016-03-04 12:37:32

我曾嘗試使用動畫延遲CSS屬性，但這不適用於自定義轉場。元素在動畫發生之前在屏幕上顯示。你不能在ng-show中手動添加一個延遲來鉤入ngAnimate，這就是爲什麼我想要使用指令 – JamesG

頁面加載延遲的角度JS動畫

回答

相關問題