Question

我正在尝试创建一个动画过渡，在过渡发生时应用常量样式。这是我的触发器结构：

animations: [
  trigger('bigTrig', [
    state('bigSt', style({
      transform: 'scale(1.3)',
      'background-color': 'green'
    })),
    state('normSt', style({
      transform: 'scale(1.0)',
      'background-color': '*'
    })),
    transition('normSt => bigSt', [
      style({
        borderWidth: '5px',
        borderColor: 'red',
        borderStyle: 'solid',
      }),
      animate(1000,
        // THIS causes the problem to appear - when it is in
        //   the animation doesn't work properly. If I comment
        //   it out, animation works almost as desired: the border
        //   appears but fades away during the transition.
        style({
          borderWidth: '5px',
          borderColor: 'red',
          borderStyle: 'solid',
        })
      )
    ]),
  ])
]

我将触发器设置为bigSt上的mouseenter和normSt上的mouseleave - 我希望该元素在1秒内增长30％，而且这样做有一个5像素纯红色边框。一旦它完成成长，我希望边界立即消失。然而，实际发生的事情是，在鼠标输入时它会获得边框，但不会开始增长，然后在1秒后，它会立即增长30％并且边框消失。

我准备了一个案例的stackblitz，用于演示。

https://stackblitz.com/edit/angular-93rwtx?file=app/app.component.ts

更新

我在Angular的github中开了一张票：https://github.com/angular/angular/issues/20051/

Answer 1

我没有看到你为你的演示准备了一个stackblitz。我对你的动画做了一些修改，我想这可能就是你想要实现的目标：

animations: [
    trigger('bigTrig', [
      state('bigSt', style({
        transform: 'scale(1.3)',
        'background-color': 'green',
        border: 'none'
      })),
      state('normSt', style({
        transform: 'scale(1.0)',
        'background-color': '*',
        border: 'none'
      })),
      transition('normSt => bigSt', [
        style({
          border: '5px solid red'
          }),
        animate('1s ease-in',
          style({
             border: '5px solid red',
             transform: 'scale(1.3)'
          }) 
        )
      ]),
    ])
  ]

在动画过渡期间应用样式会破坏过渡

1 个答案: