角度2動畫高度 - 索引 - 定位綁定

我想要一個組件，我稱之爲信息板，在幾秒鐘後動起來。我有這個想法，讓它作爲退出動畫滑動。我對這種做法很簡單，因爲我能做到這一點有關於此主題的CSS動畫：Angular 2 Slide Up and Down Animation 角度2動畫高度 - 索引 - 定位綁定

我SCSS文件是看上去很簡單：

.info-board { 
    transition: height 1s; 
    overflow: hidden; 
}

的問題在句子中出現從提到的線程：設置爲'自動'的高度不能動畫。我想，這是有道理的，但是給我帶來了一堆麻煩，因爲我的信息板應該是一個共享組件，並且在開始時被允許不可見，只有當有趣的事情發生時才顯示。

所以，看我的組件的HTML：

<div *ngIf="informationMessage"> 
    <div #contentElement class="info-board" [style.height]="contentHeight"> 
    <alert type="{{alertType}}"> 
     <strong>{{ informationHeading }}</strong> {{ informationMessage.messageText }} 
    </alert> 
    </div> 
</div>

沒什麼特別的：如果informationMessage，一個簡單的DTO，設置，應該顯示。我通過綁定來設置高度，以便正確動畫。現在複雜的部分：如果信息板沒有顯示在開始處，我基本上需要等待dto被設置並且html被渲染。我迄今發現的唯一的掛鉤是「afterViewChecked」之一，導致這種代碼：

@ViewChild('contentElement') public contentElement: ElementRef; 

    ngAfterViewChecked(): void { 
    this.checkSetBoardSize(); 
    } 

    private checkSetBoardSize() { 
    if (this.contentElement && this.contentElement.nativeElement) { 
     this.contentHeight = this.contentElement.nativeElement.scrollHeight + 'px'; 
    } 
    }

此事件是我唯一可以肯定的是，ViewChild設置，但似乎爲時已晚：由於這是更改跟蹤邏輯的最後一步，我設置的高度被忽略。唯一的另一個鉤子，看起來很有用的是「ngAfterContentChecked」，但在這一個中，ViewChild沒有設置。我也沒有發現'重新觸發'變化跟蹤的可能性，也沒有與ViewChildren爲Angular 2 @ViewChild in *ngIf工作的方法。

我錯過了某種可能性嗎？我知道，使用nativeElements並不是一個好主意，但從我的研究來看，目前需要與高度一起工作。

來源

2017-03-05 Matthias Müller

請拼寫檢查您的問題標題。 – 2017-03-05 13:11:42

只需動畫'max-height'。 – 2017-03-05 13:11:50

你可以使用的角度的animation功能，烏拉圭回合情況下，例如可以在angular docs

旁註中找到：請注意，動畫包（它外包給@angular/animations）的使用在角版本改變>4.0.0-rc.1。欲瞭解更多changelog的角度

來源

2017-03-05 13:01:26 cyrix

哦，我的天啊，我有點試圖玩弄動畫，就在那裏。 –

感謝您的支持。對不起，如果我濫用話題的第二個問題：由於無限循環，例如旋轉，我想出了css動畫。從我讀過的內容來看，這實際上更容易用css-stuff完成，還是我也錯過了角動畫中的那一個？ –

角度2動畫高度 - 索引 - 定位綁定

回答

相關問題