Angular 4 组件响应式动画

Question

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

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

我所能找到的只是通过我的 css 表取消动画，但这让我开始在我的项目中的不同地方传播代码，而且我不确定这是我想要做的 angular ......

现实生活中的例子

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

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

谢谢！

Answer 1

无法根据 CSS @Media 查询定义 JavaScript 行为。您将不得不按照我所做的去做，在那里我创建了一个 Angular 外观服务，该服务监控视口尺寸并根据检测到的内容向组件发送命令。然后，您可以使用 JavaScript 逻辑而不是 CSS 逻辑来控制动画和外观。

添加示例：

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

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

然后，在您的模板中

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

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

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

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

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

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

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