文章/答案/技术大牛

发布

问动画转换不工作-角6
EN

Stack Overflow用户

提问于 2018-05-29 15:05:20

回答 1查看 4.3K关注 0票数 2

我需要动画时，打开和关闭一个西德纳夫

    animations: [
    trigger('slider', [
      state('open', style(
        {}
      )),
      state('closed', style(
        {}
      )),
      transition('closed => open', animate('0.4s ease-in')),
      transition('open => closed', animate('0.4s ease-out'))      
    ])
  ]

..。

  @Input('state') state: string = 'closed';


  toggleState() {
    this.state = this.state === 'open' ? 'closed' : 'open';
  }

  openSidenav() {
    this.opened = true;
    this.aux = 0;
    this.toggleState();
  }

  closeSidenav() {
    if (this.opened) {
      this.opened = !this.opened;
      this.toggleState();     
    }
  }

……

我的html

<div [@slider]="state" >
    <header> {{ navTitle }} </header>
    <i *ngIf="showCloseButton" class="iconic" (click)="closeSidenav()"></i>
    <ng-content></ng-content>
</div>

<div *ngIf="backdrop && opened" class="sidenav-backdrop"></div>

不显示任何错误，只是不应用animation...Where，我会出错吗？

angular

angular6

angular-animations

angular-transitions

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-06-05 12:42:40

我的问题是动画。

  animations: [
    trigger('slider', [
      state('open', style(
        {
          transform: 'translateX(0)'
        }
      )),
      transition('void => open', [
        style({transform: 'translateX(-100%)'}),
        animate(300)
      ]),   
      transition('open => void', [
        animate(100, style({transform: 'translateX(-100%)'}))
      ])
   ]

票数 1

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

原文链接：

https://stackoverflow.com/questions/50587605

复制

相似问题

问动画转换不工作-角6
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问动画转换不工作-角6EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问动画转换不工作-角6
EN