Angular 忽略动画持续时间答案

【问题标题】：Angular ignores the animation durationAngular 忽略动画持续时间
【发布时间】：2022-02-08 16:47:31
【问题描述】：

我有一个侧边栏组件，它从Input() 获取sidebarExpanded 状态。每当输入发生变化时，动画都会正确触发，但宽度变化会立即出现。相同的动画代码在另一个组件中运行，所以不是常见的import 问题。该问题在不同的浏览器中仍然存在。我在这里错过了什么？

谢谢。

sidebar.component.ts

import {
  animate,
  state,
  style,
  transition,
  trigger,
} from '@angular/animations';
import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.scss'],
  animations: [
    trigger('collapse', [
      state('false', style({ width: '0' })),
      state('true', style({ width: '25rem' })),
      transition('false <=> true', animate(1000)),
    ]),
  ],
})
export class SidebarComponent implements OnInit {
  constructor() {}

  @Input() sidebarExpanded = true;

  ngOnInit(): void {}
}

sidebar.component.html

<div class="sidebar" [@collapse]="sidebarExpanded"></div>

sidebar.component.scss

.sidebar {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 8rem;
  bottom: 0;

  background-color: var(--color-grey-dark-4);
  box-shadow: var(--shadow-dark);
}

【问题讨论】：

animate(200) 以毫秒为单位，可能太快而无法注意到过渡？您是否尝试过更长的过渡时间？
是的，我也尝试了更长的animate()，但过渡立即出现
你也可以切换一个css类，让css做动画。
你确定sidebarExpanded是从true改成false吗？
@Andrei 是的，已登录并正常工作

标签： css angular angular-animations

【解决方案1】：

我发现我已经将动画放置在包含侧边栏的 div 和侧边栏本身上。从父 div 删除动画解决了我的问题。

【讨论】：