Question

我有一个角度滑块，其默认状态为TRUE / OPEN。我能够使用角度动画对其进行滑动，并且仅在一个方向上起作用。我没有看到这种过渡。任何帮助都会很棒。

HTML：

<div class="container" [@slide]="slideOpen">
</div>

TS：

 import {animate, state, style, transition, trigger} from '@angular/animations';

    type SlideOpen = true|false;

    @Component({ 
    animations: [trigger(
          'slide',
          [
            state('true', style({transform: 'translateX(0px)'})),
            state('false', style({transform: 'translateX(-50%)'})),
            transition('* <=> *', animate(500))
          ])],
    })

    export class PanelInfo { 
        slideOpen = true;
    }

Answer 1

我制作了一个示例示例WORKING STACKBLITZ，类似于您的代码

import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { animate, state, style, transition, trigger } from '@angular/animations';

type PaneType = 'left' | 'right';

@Component({
  selector: 'my-slide-panel',
  styleUrls: [ './slide-panel.component.scss' ],
  templateUrl: './slide-panel.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  animations: [
    trigger('slide', [
      state('left', style({ transform: 'translateX(0)' })),
      state('right', style({ transform: 'translateX(-100%)' })),
      transition('* => *', animate(300))
    ])
  ]
})
export class SlidePanelComponent {
  @Input() activePane: PaneType = 'left';
}

希望这很有帮助

如何使动画也可以朝另一个方向工作？

1 个答案: