Анимация положения маски с углом 2+

Question

У меня проблемы с анимацией свойства mask-position с помощью библиотеки анимации angular, и я надеюсь, что кто-то может указать, где я ошибаюсь.

Я знаю, что это работает:

 @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.

[Редактировать]: забыл удалить закомментированный материал.

Answer 1

Конечно, я понял это вскоре после публикации.

В любом случае, по какой-то причине вам нужно добавить дополнительный переход к вашему CSS, например,

transition: mask-position 2s linear;

Я просто оставлю это на всякий случай, если другие люди попадут на этот пост.