Question

我想使用angular-animate制作动画。我的css规则是：

.expanded {
    transition: all ease 0.5s;
    overflow: hidden;
}
.expanded.ng-hide {
    height: 0px;
}

如果我将height: 100px添加到.expanded课程，那么一切正常。但是如何在没有height定义的情况下使其工作？我需要这个，因为.expanded容器的内容可能不同。

Answer 1

将 *用作自动，

示例：

Start-Job -ScriptBlock { Get-ChildItem "$MyVariable" ; while($true) { Get-DataX | Add-ToTable "XXX" ; Start-sleep -s 120}}
Start-Job -ScriptBlock { param($MyVariable) Get-ChildItem "$MyVariable" ; while($true) { Get-DataX | Add-ToTable "XXX"; Start-Sleep -s 10 }} -Name MyTest #-ArgumentList @($MyVariable)
Start-Job -ScriptBlock { Get-ChildItem "$MyVariable" ; while($true) { Get-DataX | Add-toTable "XXX" ; Start-sleep -s 10}}
Start-Job -ScriptBlock { "$MyVariable" ; while($true) { Get-DataX | Add-toTable "XXX" ; Start-sleep -s 10}}
Start-Job -ScriptBlock { '$MyVariable' ; while($true) { Get-DataX | Add-toTable "XXX" ; Start-sleep -s 10}}
Start-Job -ScriptBlock { using:$MyVariable ; while($true) { Get-DataX | Add-toTable "XXX" ; Start-sleep -s 10}}
Start-Job -ScriptBlock { "using:$MyVariable" ; while($true) { Get-DataX | Add-toTable "XXX" ; Start-sleep -s 10}}
Start-Job -ScriptBlock { $args[0] ; while($true) { Get-DataX | Add-toTable "XXX" ; Start-sleep -s 10}} -Argumentlist@($MyVariable")

Answer 2

在CSS中无法将高度设置为“自动”（在angularJS中也是如此）。您可以尝试使用max-height。这有一些影响，但至少你可以试试。因此，动画不是从0到自动的高度，而是最大高度。您可以将max-height设置为比您需要的高度大得多，并且可以使用。

#container {
  max-height: 0;
  height: 100px;
  background: red;
  transition: max-height .3s ease-in;
}

#container:hover {
  max-height: 500px;  
}

<div id="container">
  Hover me
</div>

Answer 3

kirill.buga的帖子帮助了我，所以在阅读了这篇文章和其他一些帖子后，我对kirill.buga的帖子进行了一些修改。我摆脱了容器高度，因为它应该是自动的，减慢过渡然后隐藏溢出，这样当div折叠时，div内的内容将不再可见。

#container {
  max-height: 20px;
  background: red;
  overflow:hidden;
  transition: max-height 2s ease-in;
}

#container:hover {
  max-height: 800px;  
}

plunker example

角度动画与高度：自动;不起作用

3 个答案: