我正在开发一个 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 上下文中执行此操作的方法?
谢谢!