用变量Angular 4进行动画处理 [英] Animating with variables Angular 4
问题描述
我正在使用 @ angular / animations:4.4.6
尝试为要显示大量文本的组件制作展开/折叠动画。默认情况下,它将显示一定数量的文本,但是不同的父级组件可以定义不同的折叠高度。
据我所知,我所做的一切都是正确的。但是 animations
装饰器忽略了输入,而是直接使用默认值。
I'm using @angular/animations: 4.4.6
to try and have an expand/collapse animation for a component that will display lots of text. As a default it will display a certain amount of text, but different parent components can define a different collapse height.
From what I can tell, I'm doing everything right. But the animations
decorator is ignoring the input, and going directly for the default value.
import { AUTO_STYLE, trigger, state, style, transition, animate, keyframes } from '@angular/animations';
@Component({
selector: 'app-long-text',
templateUrl: './long-text.component.html',
styleUrls: ['./long-text.component.scss'],
animations: [
trigger('expandCollapse',[
state('collapsed, void', style({
height: '{{min_height}}',
}), {params: {min_height: '4.125em'}}),
state('expanded', style({
height: AUTO_STYLE
})),
transition('collapsed <=> expanded', animate('0.5s ease'))
])
]
})
export class LongTextComponent implements OnInit {
@Input() minHeight: string;
@Input() textBody: string;
longTextState: string = 'collapsed';
constructor() {
}
ngOnInit() {
}
expandText(){
this.longTextState = this.longTextState === 'expanded' ? 'collapsed' : 'expanded';
}
}
和html:< ; div [@expandCollapse] = {value:longTextState,min_height:minHeight} [innerHtml] = textBody>
编辑出于完整性考虑:具有动画(如上所述)的动画对象的父对象< div>
具有(click)= expandTex()
属性。
EDIT for completeness sake: the parent <div>
of the one with the animation (mentioned above) has a (click)="expandTex()"
attribute.
推荐答案
您需要将参数值包装在对象中的模板
params
You nned to wrap the param values in the template in an object "params"
@Component({
selector: 'hello',
template: `<div (click)="expandText()" style="cursor: pointer">
<div [@expandCollapse]="{value: longTextState, params:{min_height: minHeight}}" [innerHtml]="textBody" style="overflow: hidden;">
</div> // you need to wrap it in params the input values
<h1>{{longTextState}}</h1>
<h1>this.minHeight: {{minHeight}}</h1>
</div>`,
styles: [`h1 { font-family: Lato; }`],
animations: [
trigger('expandCollapse',[
state('collapsed', style({
height: '{{min_height}}',
}), {params: {min_height: '3em'}}),
state('expanded', style({
height: AUTO_STYLE
})),
transition('collapsed <=> expanded', animate('0.5s ease'))
])
]
})
工作 LINK
这篇关于用变量Angular 4进行动画处理的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!