ng-bootstrap崩溃:如何应用动画? [英] ng-bootstrap collapse: How to apply animations?
本文介绍了ng-bootstrap崩溃:如何应用动画?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用Collapse: https://ng-bootstrap.github.io/#/components/collapse
I'm using Collapse: https://ng-bootstrap.github.io/#/components/collapse
但是,它没有动画;它没有动画.甚至不在演示站点上.我应该如何实现呢?
However, it does not animate; even not on the demo site. How should I implement this??
推荐答案
这是一种很好的方法,它可以用于显示和折叠:(尽管它实际上并不需要ng-自举了)
Here's a good way to do it, I think, and it works both for revealing and collapsing: (though it doesn't really need ng-bootstrap anymore)
template.html:
<button (click)="isCollapsed = !isCollapsed">Toggle</button>
<p [@smoothCollapse]="isCollapsed?'initial':'final'">
your data here
</p>
.
component.ts:
import { trigger, state, style, animate, transition } from '@angular/animations';
@Component({
selector: 'app-my-component',
templateUrl: './template.html',
styleUrls: ['./style.scss'],
animations: [
trigger('smoothCollapse', [
state('initial', style({
height:'0',
overflow:'hidden',
opacity:'0'
})),
state('final', style({
overflow:'hidden',
opacity:'1'
})),
transition('initial=>final', animate('750ms')),
transition('final=>initial', animate('750ms'))
]),
]
})
export class MyComponent ...
详细信息:
- 初始高度:0允许从零开始
- 未指定最终高度会导致元素在全部显示后停止增长
- 溢出:到处都隐藏,因此您的元素不会在其他元素上运行
- 从0到1的不透明度使它变得更好(我认为)
- 我花了一些时间才意识到的重要事情是不将
[ngbCollapse] ="isCollapsed"
放入< p>
否则会破坏所有动画.而且我们不需要它,因为我们将高度设置为0
- initial height:0 allows to start from nothing
- not specifying a final height let the element stop growing when it's all displayed
- overflow:hidden everywhere so your element doesn't run on other elements
- opacity from 0 to 1 makes it nicer (in my opinion)
- An important thing which took me some time to realize is to NOT put
[ngbCollapse]="isCollapsed"
in the<p>
otherwise it breaks all the animation. And we don't need it since we set the height to 0
希望有帮助,我花了一天时间:P
Hope it helps, I spent a day on it :P
这篇关于ng-bootstrap崩溃:如何应用动画?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文