gpt4 book ai didi

html - 使用变量 Angular 4 制作动画

转载 作者:太空宇宙 更新时间:2023-11-04 13:59:00 24 4
gpt4 key购买 nike

我正在使用 @angular/animations: 4.4.6尝试为将显示大量文本的组件设置展开/折叠动画。默认情况下它会显示一定数量的文本,但不同的父组件可以定义不同的折叠高度。
据我所知,我做的一切都是对的。但是 animations装饰器忽略输入,直接使用默认值。

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()"属性。

最佳答案

You need 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

关于html - 使用变量 Angular 4 制作动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47122833/

24 4 0
文章推荐: c# - 使用 CLR 编译的 native DLL,我是否必须先公开函数才能使用它们?
文章推荐: jquery - 向下滚动时出现并缩放
文章推荐: C++在字符串中查找重复的子字符串
文章推荐: javascript - 从javascript中的
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com