[英]Angular Animations: Animate Parent and Child Elements
我創建了一個帶有Angular動畫的元素( div.parent
)。 當我向其添加子元素並嘗試同時為子項設置動畫時,其中一個動畫最終不會運行(它只是捕捉到新狀態)。
Stackblitz: https ://stackblitz.com/edit/angular-2tbwu8
標記:
<div [@theParentAnimation]="state" class="parent">
<div [@theChildAnimation]="state" class="child">
</div>
</div>
動畫:
trigger( 'theParentAnimation', [
state( 'down', style( {
transform: 'translateY( 100% ) translateZ( 0 )',
} ) ),
transition( '* <=> *', [
group( [
query( ':self', [
animate( '0.9s cubic-bezier(0.55, 0.31, 0.15, 0.93)' ),
] ),
query( '@theChildAnimation', animateChild() ),
] ),
] ),
] ),
trigger( 'theChildAnimation', [
state( 'down', style( {
transform: 'translateY( 100% ) translateZ( 0 )',
} ) ),
transition( '* <=> *', [
animate( '0.9s cubic-bezier(0.55, 0.31, 0.15, 0.93)' ),
] ),
] ),
看起來您不需要使用query( ':self', ...
因為您正在使用group()
動畫將並行運行。您可以更改父動畫中的轉換:
transition('* <=> *', [
group([
query('@theChildAnimation', animateChild()),
animate('0.9s cubic-bezier(0.55, 0.31, 0.15, 0.93)'),
]),
]),
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.