Angular 4 组件响应式动画

Question

我正在开发一个 Angular 响应式应用程序，该应用程序在移动设备上有一个抽屉。

我喜欢 Angular 中的 Web 动画 API 实现，但我找不到可以根据媒体查询断点配置动画的地方。

我能找到的就是通过我的CSS表取消动画，但这让我开始将代码传播到项目中的不同位置，而且我不确定这是否是 Angular 想要我做的事情。 .

现实生活中的例子

我的应用程序抽屉使用此代码来制作动画

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

drawerOpened is a boolean that toggle when app menu button is pressed.

我的组件看起来像这样:

@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 代码中操作所有内容并禁用 Desktop BreakPoint 上的 css 属性之外，是否存在某种方法可以在 Angular 上下文中执行此操作？

谢谢!

Answer 1

无法基于 CSS @Media 查询定义 JavaScript 行为。您必须执行我所做的操作，我创建了一个 Angular 外观服务，用于监视视口(viewport)尺寸并根据检测到的内容向组件发送命令。然后，您可以使用 JavaScript 逻辑而不是 CSS 逻辑来控制动画和外观。

添加示例:

创建一个监视视口(viewport)宽度的服务。如果视口(viewport)小于 500 像素，则服务输出“移动”，否则输出“桌面”。

在您的组件中，声明一个触发器，我们将其称为@slide，具有多种状态。我们还将设置一个名为 stateOfYourChoosing 的私有(private)变量，您可以将其设置为字符串。

然后，在您的模板中

<div [@slide]="stateOfYourChoosing"></div>

然后，您可以选择 stateOfYourChoosing 的默认状态，以及您希望组件如何根据组件逻辑进行转换。

因此，如果您的外观服务输出“桌面”，则您的默认 stateOfYourChoosing 将为“slideOut”。

transition('slideOut => slideIn', animate('100ms ease-in'))

如果外观服务输出“mobile”，它会将 stateOfYourChoosing 设置为“mobileSlideOut”，而您的转换代码为

transition('mobileSlideOut => mobileSlideIn', animate('100ms ease-in'))

然后，您可以通过控制触发器的状态来控制动画模块中的所有响应式动画。