使用Angular 2+动画遮罩位置

Question

我在用angular的动画库对mask-position属性进行动画处理时遇到了麻烦，希望有人能指出我要去哪里。

我知道这可行：

 @keyframes maskWipe{
     from {mask-position: 100% 0;}
     to {mask-position: 0 0;}
 }

但是，当我尝试将其转换为角度时，动画完成后只是“弹出” ，而不是动画。

这是我当前的角度动画：

animations: [
    trigger('slideInOut', [
      state('slideIn', style({
        webkitMaskPosition: "0 0"
      })),
      state('slideOut', style({
        webkitMaskPosition: "100% 0"
      })),
      transition('slideIn => slideOut', [
        animate('2s', keyframes([
          style({webkitMaskPosition: '0 0'}),
          style({webkitMaskPosition: "100% 0"})
        ]))
      ]),
      transition('slideOut => slideIn', [
        animate('2s', keyframes([
          style({webkitMaskPosition: "100% 0"}),
          style({webkitMaskPosition: "0 0"})
        ]))
      ]),
    ]),
  ],

注意：由于我使用的是chrome，因此必须使用webkitMaskPosition，而chrome将mask-position转换为webkit-mask-position。

[编辑]：忘记删除已注释掉的内容。

Answer 1

当然，发布此消息后不久，我就知道了。

无论如何，由于某种原因，您需要像这样将额外的过渡添加到CSS中

transition: mask-position 2s linear;

如果其他人出现在此帖子上，我将不做介绍。