Question

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

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

请参阅./app/components/transition-phases/transition-phasescomponent.ts

第3个标签期望在点击“切换状态”时发生以下情况：

立即切换到灰色背景。
取1s使边框变圆。
然后花500毫秒来淡出圆形边框并淡化目标样式

出于某种原因，立即应用圆形边框，如不考虑1000毫秒过渡。我错过了什么？

Answer 1

好吧，到目前为止 - 它看起来像一个解决方法 - 通过强制将默认border-radius设置为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)
      ])
    ])
  ]
})

角动画：过渡阶段不等待

1 个答案: