javascript - 使用 Angular 2+ 动画蒙版位置

Question

我在使用 angular 的动画库为 mask-position 属性设置动画时遇到了问题，我希望有人能指出我哪里出错了。

我知道这行得通:

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

但是当我尝试将它转换为 Angular 动画时，它只是 'pops' 而不是动画。

这是我当前的 Angular 动画:

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

注意:我必须使用 webkitMaskPosition，因为我使用的是 chrome，而 chrome 将掩码位置转换为 webkit-掩码位置。

[编辑]:忘记删除注释掉的东西。

Answer 1

当然，我在发布后不久就弄明白了。

无论如何，出于某种原因，您需要像这样向您的 css 添加额外的过渡

transition: mask-position 2s linear;

我会保留它，以防其他人看到这篇文章。