**Angular4 a a a a a a滑入 * 和 * 滑出 * 容器元素的最低限度和原生方式是什么?
例如:
<div ngIf="show">
<!-- Content -->
</div>
当show变为 true 时,* 滑入 * 内容(从上到下,就像jQuery. slideDown()一样)。
当show变为 false 时,Slide Out 内容(适合于具有缓出效果)。
**Angular4 a a a a a a滑入 * 和 * 滑出 * 容器元素的最低限度和原生方式是什么?
例如:
<div ngIf="show">
<!-- Content -->
</div>
当show变为 true 时,* 滑入 * 内容(从上到下,就像jQuery. slideDown()一样)。
当show变为 false 时,Slide Out 内容(适合于具有缓出效果)。
4条答案
按热度按时间e1xvtsh31#
首先是一些代码,然后是解释。描述这个的官方文档是here。
在模板中:
我发现有Angular 的方式有点棘手的把握,但一旦你理解了它,它相当容易和强大。
人类语言中的动画部分:
我们使用的缓动功能是缓入,在200毫秒内,你可以根据自己的喜好改变它。
wixjitnu2#
我回答了一个非常相似的问题,这里有一个方法:
首先,创建一个文件,在其中定义动画并将其导出。只是为了让它在app.component.ts中更清晰
在下面的例子中,我使用了div的最大高度,从0px(隐藏时)到500px,但是您可以根据需要更改它。
此动画使用状态(输入和输出),当我们单击按钮时,将切换状态,这将运行动画。
然后在你的app.组件中,我们导入动画并创建切换动画状态的方法。
下面是app. component. html的外观:
下面是我创建的StackBlitz示例:https://angular-muvaqu.stackblitz.io/
边注:如果出现错误并要求您添加 * BrowserAnimationsModule *,只需将其导入您的app. module. ts:
11dmarpk3#
实际上,当
show
变量为真时,要使用的最小Angular (如原始问题中所要求的)只是向DOM元素添加一个类,并通过CSS执行动画/过渡。因此,您的最小角代码为:
使用此解决方案时,您需要为转换创建CSS规则,如下所示:
如果您有浏览器兼容性问题,只需记住在
transition
中添加供应商前缀。参见the example here
b5lpy0ml4#
投票最多的答案是不实现真实的的滑入/滑出(或滑下/滑上),如:
1.它没有在height属性上做一个软过渡,在时间为零时,元素已经有了100%的高度,在它下面的元素上产生了一个突然的小故障。
1.当向外/向上滑动时,该元素执行
translateY(-100%)
,然后突然消失,导致其下方的元素出现另一个小故障。您可以像这样实现滑入和滑出:
我的组件.ts
我的组件.html
我的组件.scss