文章/答案/技术大牛

发布

社区首页 >问答首页 >使用变量Angular 4设置动画

问使用变量Angular 4设置动画
EN

Stack Overflow用户

提问于 2017-11-05 22:43:36

回答 1查看 9.3K关注 0票数 5

我正在使用@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()"属性。

html

css

angular

animation

angular-animations

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-11-06 03:13:39

参数你需要将模板中的参数值包装在一个“

”对象中。

   @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'))
    ])
  ]
})

工作

票数 13

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/47122833

复制

相似问题

问使用变量Angular 4设置动画
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用变量Angular 4设置动画EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用变量Angular 4设置动画
EN