角动画：过渡阶段不等待

【问题标题】：Angular animations: Transition phase doesn't wait角动画：过渡阶段不等待
【发布时间】：2018-09-01 21:48:54
【问题描述】：

以下沙箱显示了我的问题：

https://stackblitz.com/edit/ngx-anims-transition-issue

见./app/components/transition-phases/transition-phasescomponent.ts

第三个选项卡预计在单击“切换状态”时会发生以下情况：

立即切换到灰色背景。
用 1s 使边框变圆。
然后用 500 毫秒淡出圆角边框并淡入目标样式

由于某种原因，圆角边框会立即应用，就像没有考虑 1000 毫秒过渡一样。我错过了什么？

【问题讨论】：

尝试使用新的动画模块，而不是 @angular/animations 中的旧动画模块 (angular.io/guide/animations)。旧的已弃用。
确实！谢谢。可惜它并没有解决我的行为。

标签： angular angular-animations

【解决方案1】：

嗯，到目前为止 - 它看起来像是一种解决方法 - 通过将默认边框半径强制为 0，它可以工作：

const transitionStyleSquareBorder = { 'border-radius' : '0px'};
const transitionStyleBorderRounded = { 'border-radius' : '40px' };

@Component({
  selector: 'app-transition-phases',
  templateUrl: './transition-phases.component.html',
  styleUrls: ['./transition-phases.component.css'],
  animations: [
    trigger('divActivatedState', [
      state('idle', style(idleStateStyle)),
      state('active', style(activeStateStyle)),
      transition('idle <=> active', [

        // Set transition color immediately
        style(transitionStylecolor),
        style(transitionStyleSquareBorder),     // <- WORKAROUND

        // Make its border rounded in 500ms
        animate('500ms', style(transitionStyleBorderRounded) ),

        // Take 500ms to fade-out the rounded border and fade-in the target style
        animate(1000)
      ])
    ])
  ]
})

【讨论】：

伙计，你帮我省了一晚上的烦恼。一直试图弄清楚这一点。根据我看到的教程，您的原始代码应该可以工作。谢谢！