Angular 5动画边框底部

Question

我正在尝试使用关键帧为底部边框设置动画，以使箭头增长，但是没有borderBottom或border-bottom的属性。我什至尝试使用“ border-bottom”和“ borderBottom”，但是样式没有改变。但是当我用css而不是触发器编写时，border-bottom确实存在。是否可以解决此问题，或者我缺少什么？如果有更好的动画箭头方式，例如放大图片，谢谢您的帮助！

trigger('arrowup',[
    state('inactive',style({display:"none"})),
    state('active',style({display:"flex", borderLeft:"200vh solid transparent",borderRight:"200vh solid transparent",borderBottom: "200vh solid block" })),
    transition('inactive => active',animate("500ms",keyframes([
      style({borderBottom:"100vh",borderLeft:"100vh solid transparent",borderRight:"100vh solid transparent"}),
      style({borderBottom:"150vh",borderLeft:"150vh solid transparent",borderRight:"150vh solid transparent"})
    ])),
   ),
    transition('active => inactive',animate('0ms',)),
  ]),