角度2/4動畫的div高

我會盡量保持簡短。出於某種原因，我的動畫似乎在寬度/透明度樣式屬性做工精細但它不會對height屬性工作....角度2/4動畫的div高

動畫 -

trigger('Grow', [ 
transition(':enter', [ // :enter is alias to 'void => *' 
    style({height:'0'}), 
    animate(500, style({height:'*'})) 
]), 
transition(':leave', [ // :leave is alias to '* => void' 
    animate(500, style({height:0})) 
]) 
])

更改「高度」來寬度/不透明度和動畫效果很好... 任何人都知道這個問題？無法在任何地方找到相關答案。

的我想要實現的例子就像udemy動畫，在點擊一個部分的股利高度擴展了顯示器的所有視頻 - https://www.udemy.com/meteor-react/

感謝您的閱讀。

更新 - 仍然沒有工作...

也許它的東西與什麼，我對動畫？

<div class="animate" *ngIf="show" [@animate]> 
    <div *ngFor="let video of section"><a>hi</a></div> 
</div>

發生的事情是，一旦我點擊的div.animate是顯示（通過ngif），並有很多，說「嗨」線的填充。我希望在div.animate節目中製作我指定的動畫。

幫助！ ^^

來源

2017-04-19 Ben

當您切換顯示道具動畫不起作用。所以你不能在ngIf中使用它。 – Yeysides

我明白了...好吧，如果那樣的話，你有任何想法如何udemy做這個動畫上我附加的例子 – Ben

做一些像[@animate] =「myAnimationState」。 Idk當你需要它顯示時，但在我的例子中，它將'helpMenuOpen'變量從'out'狀態切換到'in'狀態（click）事件。您需要控制'myAnimationState'變量以達到您想要的效果，從'：enter'更改爲'：leave'，就像您命名它一樣。例如，也許你想要改變路線;所以聽路由更改以更改該變量。 – Yeysides

這就是我對我有用的東西。有點不同的語法，因爲我有觸發器更改狀態，然後使用過渡方法來動畫。

@Component({ 
    ... 
    animations: [ 
    trigger('slideInOut', [ 
     state('in', style({ 
     overflow: 'hidden', 
     height: '*', 
     width: '300px' 
     })), 
     state('out', style({ 
     opacity: '0', 
     overflow: 'hidden', 
     height: '0px', 
     width: '0px' 
     })), 
     transition('in => out', animate('400ms ease-in-out')), 
     transition('out => in', animate('400ms ease-in-out')) 
    ]) 
    ] 
}) 
export class AComponent implements OnInit { 

    helpMenuOpen: string; 

    constructor() { } 

    ngOnInit() { 
    this.helpMenuOpen = 'out'; 
    } 

    toggleHelpMenu(): void { 
    this.helpMenuOpen = this.helpMenuOpen === 'out' ? 'in' : 'out'; 
    } 

}

然後用它，在我看來是這樣的：

<div [@slideInOut]="helpMenuOpen" class="d-inline-block"> 
    <h1>My Title</h1> 
    <p>My paragraph</p> 
</div> 
<button class="float-right" (click)="toggleHelpMenu()">help</button>

來源

2017-04-19 13:49:20 Yeysides

通過這樣做，您可以獲得與Udemy相同的動畫效果嗎？如果您可以編輯並添加代碼的其餘部分，以實現它並更改狀態，那將非常棒！謝謝 – Ben

@Ben檢查更新的答案，但沒有我沒有訪問udemy，這只是一個動畫的例子，改變高度和寬度 – Yeysides

仍然無法正常工作] = – Ben

角度2/4動畫的div高

回答

相關問題