角度4組件響應動畫

我正在開發一個角度響應應用程序，它在移動設備上有一個抽屜。角度4組件響應動畫

我喜歡Angular的Web動畫API實現，但我找不到可以根據我的媒體查詢斷點配置動畫的地方。

我只能通過我的css工作表取消動畫，但是這使我開始在我的項目中的不同地方分發代碼，我不確定這是什麼角度打算給我做。 ..

活生生的例子

我的應用程序抽屜使用此代碼動畫

<div class="mobile-menu" [@animateDrawer]="drawerOpened"> 
    <!-- Drawer's menu goes here --> 
</div>

drawerOpened是按下應用程序菜單按鈕時切換的布爾值。

我的組件看起來像這樣：

@Component({ 
    selector: 'app-header', 
    templateUrl: './header.component.html', 
    styleUrls: ['./header.component.scss'], 
    animations: [ 
    trigger('animateDrawer', [ 
     state('inactive', style({ 
     transform: 'translate3d(-100%, 0, 0)' 
     })), 
     state('active', style({ 
     transform: 'translate3d(0, 0, 0)' 
     })) 
    ]) 
    ] 
})

的CSS代碼，我取消了動畫效果

.mobile-menu{ 
    opacity: 1 !important; 
    display: flex !important; 
    transform: none !important; 
}

而且操作都在我的CSS代碼&禁用的CSS桌面BreakPoint上的屬性，確實存在某種方式在Angular上下文中執行它？

謝謝！

來源

2017-09-13 neoswf

無法基於CSS @Media查詢定義JavaScript行爲。您將不得不做我所做的事情，我創建了一個Angular外觀服務，用於監視視口尺寸並根據檢測到的內容向組件發送命令。然後，您可以使用JavaScript邏輯而不是CSS邏輯來控制動畫和外觀。

添加一個例子：

創建監視視口寬度的服務。如果視口小於500像素，則服務輸出「移動」，否則輸出「桌面」。

在您的組件中，聲明一個觸發器，我們將其稱爲@slide，具有多個狀態。我們還將設置一個名爲stateOfYourChoosing的私有變量，並且可以將其設置爲一個字符串。

然後，在你的模板

<div [@slide]="stateOfYourChoosing"></div>

然後，您可以選擇您想要stateOfYourChoosing的默認狀態是哪個狀態，以及如何你想你的組件來過渡基於組件的邏輯。

因此，如果您的外觀服務輸出「桌面」，您的默認stateOfYourChoosing將是「slideOut。「

transition('slideOut => slideIn', animate('100ms ease-in'))

如果出現服務輸出‘移動’，它設置stateOfYourChoosing爲‘mobileSlideOut，’和你的過渡代碼，而不是

transition('mobileSlideOut => mobileSlideIn', animate('100ms ease-in'))

然後你可以控制你所有的敏感動畫在動畫通過控制你的觸發器處於什麼狀態來控制模塊

來源

2017-09-18 13:59:56

你可以舉一個例子來說明如何用這個服務來配置組件的動畫對象嗎 – neoswf

@neoswf當然可以看到我的擴展答案 –

首先 - 謝謝！ ved你的解決方案，但我必須說，堆放一個OnResize監聽器，並不是我想對我的應用做的最好的事情。已經有一個狗屎在滾動聆聽。不喜歡它，但似乎我不會有太多的選擇在這裏...... – neoswf

角度4組件響應動畫

回答

相關問題