Angular2 动画媒体查询

Posted 2023-03-06

【中文标题】Angular2 动画媒体查询

【英文标题】：Angular2 animations media queries

【发布时间】：2016-12-12 08:01:14

【问题描述】：

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

例如，假设我在主页上有一个 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 选择器大小的正确方法是什么？

【问题讨论】：

我认为没有合适的直接方式。你只能通过javascript来控制它。

我也想知道，处理不同视口的正确方法是什么？ @micronyks 建议你用 JS 控制它，如何？

【参考方案1】：

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

我有一个变量表示它是打开还是关闭 (menuOpen) 仅在真假之间变化，并且一个变量具有三种状态：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>

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

【讨论】：

这确实解决了这个问题，尽管希望 Angular 会在某个时候创建​​一个内置的解决方案。我认为在顶层（AppComponent 或类似的）实现单个侦听器并使用服务在整个应用程序中提供屏幕大小将是处理应用程序范围内基于媒体查询的动画的有效方法。

调整大小怎么样？

【参考方案2】：

有一种更简单的方法可以通过动画回调实现这一点。在你做的模板中：

...
<element [@triggerName]="state"
       (@triggerName.start)="animationStarted($event)"
       (@triggerName.done)="animationDone($event)">
...

然后在组件中：

...
 animationStarted(event) 
    // remove all classes you use. E.g.:
    event.element.classList.remove('class1');
    event.element.classList.remove('class2');
  

  animationDone(event) 
    // add class based on the state. E.g:
    const classToApply = this.state ? 'class1' : 'class2';
    event.element.classList.add(classToApply);
  
...

然后在 css 中您可以进行媒体查询，例如：

.some-element
  // styles here

  // some media query
  @media ... 

    &.class1 
      // class1 styles here
    

    &.class2 
      // class2 styles here
    
    ...