角度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动画高度 - 索引 - 定位绑定

回答

相关问题