アニメーショントランジション中にスタイルを適用すると、トランジションが中断されます

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', 
     }) 
    ) 
    ]), 
    ]) 
] 

私はmouseenter上とmouseleave上normStにbigStにトリガーを設定しています - 私は、要素が1秒で30％の成長が予想される、そして5を持っていることをやっている間、ピクセルの実線の赤い枠線。成長が終わったら、すぐに国境が消えて欲しい。しかし、実際には何が起こるのかは、マウスを入力すると境界を取得しますが、成長を開始せず、1秒後に即座に30％増加し、境界が消えます。

デモ用に、ケースのスタックブリッツを用意しました。

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

私は角のgithubのにチケットを開いた

UPDATE：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)' 
      }) 
     ) 
     ]), 
    ]) 
    ]