使用 Angular 动画蒙版位置 2+答案

【问题标题】：Animating Mask Position with Angular 2+使用 Angular 动画蒙版位置 2+
【发布时间】：2018-10-31 23:28:44
【问题描述】：

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

我知道这行得通：

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

但是当我尝试将其转换为角度时，动画只是 'pops' 完成而不是动画。

这是我当前的角度动画：

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 会将 mask-position 转换为 webkit-mask-position。

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

【问题讨论】：

标签： javascript css angular animation

【解决方案1】：

当然，我在发布后不久就知道了。

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

transition: mask-position 2s linear;

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

【讨论】：