javascript - Angular2 动画媒体查询

Question

我一直在研究 Angular2 的动画 DSL，但我对如何将动画限制在特定的媒体屏幕尺寸上感到有点困惑。

例如，假设我有一个 Logo ，该 Logo 在主页上的宽度为 400 像素，当用户在计算机显示器上访问任何其他页面时会缩小到 200 像素。

...
animations: [
trigger('homeLogoState',[
    state('inactive', style({
      width: '200px',
      transition: 'width'
    })),
    state('active', style({
      width: '400px',
      transition: 'width'
    })),
    transition('inactive <=> active', animate('300ms ease-in'))
  ])
]
...

然而在移动设备上，每个页面都需要保持 100 像素。

我知道我可以通过控制 DOM 中显示的内容来控制不同的动画，如下所示，但这可能会产生大量的代码重复来处理每个屏幕尺寸的每个动画变化。

<div class="hidden-under-1920px" @logoAnimationOne="page">
  <img src="logo.png">
</div>
<div  class="hidden-under-1280px" @logoAnimationTwo="page">
  <img src="logo.png">
</div>

将不同的动画限制为特定的@media 选择器大小的正确方法是什么？

Answer 1

我有一个解决方案，只是不知道它是否是最好的。我遇到了类似的问题，但已解决。

我有一个变量，表示它是打开还是关闭 (menuOpen) 只在 true 和 false 之间变化，以及一个具有三种状态的变量:0 或 1 或 2 (onOpen)我有三个状态，你看这里

import { Component, trigger, state, animate, transition, style, HostListener} from '@angular/core'
        ....
        ....
        animations: [
                trigger('visibilityChanged', [
                    state('0', style({ width: '50px' })),
                    state('1', style({ width: '25%' })),
                    state('2', style({ width: '100%' })),
                    transition('* => *', animate('.3s'))
                ])
            ]....

你可以做一个单一的功能来解析，我是我没做过

    export class AppComponent {
        wt;

        @HostListener('window:resize', ['$event'])
        sizeWindow(event) {
            this.wt = event.target.innerWidth;
            this.sizeMenu(this.wt);
            console.log('width =>', this.wt);
        }

        constructor() {
            this.wt = window.innerWidth;
        }

        sizeMenu(width) {
            if (this.menuOpen === true) {
                if (width >= 600) {
                    this.onTestOpen = 1;

                } else if (width < 600) {
                    this.onTestOpen = 2;
                }

            } else if (this.menuOpen === false) {
                this.onTestOpen = 0;

            }

          }

        openMenu() {
                let wwt = window.innerWidth;
                if (this.menuOpen === false) {
                    if (wwt >= 600) {
                        this.onTestOpen = 1;

                    } else if (wwt < 600) {
                        this.onTestOpen = 2;
                    }
                    this.menuOpen = true;

                } else if (this.menuOpen === true) {

                    this.onTestOpen = 0;
                    this.menuOpen = false;

                }

            }
    }

在我的模板中有它

<div class="geral" [@visibilityChanged]="onOpen"></div>

我认为在你的情况下将不得不处理更多的状态。