3

私はAngularレスポンシブアプリに取り組んでおり、モバイルにはドロワーがあります。

Angular での Web アニメーション API の実装が気に入っていますが、メディアクエリのブレークポイントに基づいてアニメーションを構成できる場所が見つかりません。

私が見つけることができるのは、css シートを介してアニメーションをキャンセルすることだけですが、それにより、プロジェクト内のさまざまな場所にコードが広がり始めます。

実際の例

私のアプリケーション ドロワーは、このコードを使用してアニメーション化します

<div class="mobile-menu" [@animateDrawer]="drawerOpened">
  <!-- Drawer's menu goes here -->
</div>

drawerOpenedアプリ メニュー ボタンが押されたときにトグルするブール値です。

私のコンポーネントは次のようになります。

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
  animations: [
    trigger('animateDrawer', [
      state('inactive', style({
        transform: 'translate3d(-100%, 0, 0)'
      })),
      state('active', style({
        transform: 'translate3d(0, 0, 0)'
      }))
    ])
  ]
})

アニメーション効果をキャンセルするCSSコード

.mobile-menu {
  opacity: 1 !important;
  display: flex !important;
  transform: none !important;
}

私のcssコードですべてを操作し、デスクトップブレークポイントでcssプロパティを無効にする以外に、Angularコンテキスト内でそれを行う方法はありますか?

ありがとうございました！

4

3 に答える 3

1

1 つの方法は、コンポーネント デコレータでアニメーションを宣言する代わりに、実行時にアニメーションを作成することです。

  1. コンポーネントが使用するサービスを作成します。
  2. アニメーション構成を受け取った新しいメソッドを作成します。
  3. ウィンドウサイズを検出します。
  4. アニメーションをビルドして返します。

次のようになります (次のコードはテストされておらず、単なる例です)。

export interface MediaQueryStyle
{
    minWidth: number;
    initialStyle: any; // Style object to apply before animation
    endStyle: any;     // Style object to apply after animation
}

export interface MediaQueryAnimationConfig
{
    element: ElementRef;
    mediaStyles: MediaQueryStyle[];
    duration?: number | string;

    ... // Whatever you need to create your animation 
}

サービス：

@Injectable({
    providedIn: 'root'
})
export class MediaQueryAnimationService
{
    constructor(private builder: AnimationBuilder) { }

    public create(config: MediaQueryAnimationConfig): AnimationPlayer
    {
        // Read animation configuration
        const duration = config.duration || 1000;
        const mediaStyle = this.findMediaStyle(config.styles);

        // Build the animation logic (add here any other operation, e.g. query)
        const animation = this.builder.build([
            style(mediaStyle.initialStyle),
            animate(duration, style(mediaStyle.endStyle)
        ]);

        return animation.create(config.element);
    }

    private findMediaStyle(styles: MediaQueryStyle[])
    {
        const viewWidth = window.innerWidth;

        // Some logic to scan the array and return the style that complies with `viewWidth`
        return styles.find(style => ...);
    }
}

あなたのコンポーネントで：

<something ... #someElement></something>

@Component({
    selector: 'something',
    templateUrl: './something.component.html',
    styleUrls: ['./something.component.scss']
})
export class SomethingComponent implements OnInit
{
    @ViewChild('someElement')
    private elementRef: ElementRef;

    constructor(private mqAnimation: MediaQueryAnimationService) { }

    ngOnInit() { ... }

    public onSomeEvent()
    {
        const player = mqAnimation.create({ element: elementRef.element, minWidth: ... });

        player.onDone(player.destroy);

        player.play();
    }
}

役に立つ読み物と例:

https://angular.io/api/animations/AnimationBuilder

https://stackblitz.com/edit/angular-animation-builder

MatDialog 内のアニメーションが機能しない

頑張ってね✌</p>

于 2019-04-08T13:01:15.590 に答える