Angular div高度上的角度2/4动画

我会尽量简短。 出于某种原因，我的动画在“宽度/不透明度”样式属性上似乎工作正常，但在“高度”属性上却不工作

动画-

trigger（'Grow'[
转换（':enter'，[/:enter是'void=>*'的别名
样式（{height:'0'}），
动画（500，样式（{height:'*}））
]),
转换（':leave'，[//:leave是'*=>void'的别名
动画（500，样式（{高度：0}））
])
])

将“高度”更改为宽度/不透明度，动画效果非常好。。。 有人知道问题出在哪里吗？在任何地方都找不到相对的答案

我试图实现的一个例子是udemy中的动画，单击某个部分时，div height会展开所有视频的显示-

谢谢你的阅读

更新-仍然不起作用

也许是因为我的动画

你好

一旦我单击，就会显示div.animate（通过ngif）并填充许多表示“hi”的行。 我想在div.animate show上，制作我指定的动画

---

救命啊^^

在

trigger（）

函数中没有定义任何状态

创建命名动画触发器，其中包含绑定到触发器的表达式更改时要计算的

state（）

和

transition（）

项列表（下面示例中的表达式为

[@slideInOut]=“helpMenu”

）

@组件({
...
动画：[
触发器（'slideInOut'[
状态（'in'，风格）({
溢出：“隐藏”，
高度：'*'，
宽度：“300px”
})),
状态（'out'，风格({
不透明度：“0”，
溢出：“隐藏”，
高度：“0px”，
宽度：“0px”
})),
过渡（'in=>out'，动画（'400ms缓进-缓出'），
过渡（'out=>in'，动画（'400ms缓进-缓出'））
])
]
})
导出类组件实现OnInit{
帮助菜单：字符串；
构造函数（）{}
恩戈尼尼特（）{
this.helpMenu='out'；
}
toggleHelpMenu（）：无效{
this.helpMenu=this.helpMenu=='out'？'in'：'out'；
}
}

然后在您的视图中使用它，如下所示：

我的头衔
我的段落

帮助

角度动画cat与

*ngIf

指令配合使用非常好

现在官方文件中有一个描述如何做到这一点的例子

示例中的问题是模板动画触发器被指定为

[@animate]

， 但在组件的动画声明中，实际触发器是

Grow

。因此，模板触发器需要指定为

[@Grow]

app.component.ts

trigger（“grow”），注意触发器名称
转换（“：输入”[
//：输入“void=>*”的别名
样式（{高度：“0”，溢出：“隐藏”}），
动画（500，样式（{高度：*“}））
]),
过渡（“：离开”[
//：leave是“*=>void”的别名
动画（500，样式（{高度：0，溢出：“隐藏”}））
])
])

app.component.html

通过这样做，您可以获得与Udemy相同的动画效果？如果你可以编辑和添加你的代码的其余部分，你如何实现它和改变状态，那将是伟大的！thanks@Ben检查更新的答案，但不，我没有访问udemy的权限，这只是一个更改高度和宽度的动画示例。我发现，当目标高度设置为“自动”时，动画跳跃，而当高度属性设置为“*”时，动画平滑。而不是2
过渡（…）
“通过执行以下操作，您可以拥有一个同时适用于这两种功能的单一功能：
转换（'*=>*'，动画（'400ms ease in out'））
我明白了。。。如果是这样的话，你知道udemy是如何在我附加的示例中制作这个动画的，比如[@animate]=“myAnimationState”。Idk，但在我的示例中，它会在（单击）事件时将我的“helpMenuOpen”变量从“out”状态切换到“in”状态。您需要将“myAnimationState”变量控制为所需的效果，以便从您命名的“：enter”更改为“：Left”。例如，也许你想改变路线；所以听路由更改来更改那个变量。好的，最终我只是去掉ngIf并将其设置为隐藏，以便正确地设置动画。。。这很好，因为该div下没有太多内容会导致问题。感谢您的帮助：）动画绝对可以处理
ngIf
更改，您只需设置动画即可处理此更改。将状态设置为
'*'
和
'void'
，而不是
'in'
和
'out'