используйте веб-анимацию для создания правильного слайда и затухания анимации одного экземпляра

Я хочу создать веб-анимацию с новой спецификацией и полифиллом. Анимация, которую я пытаюсь создать, состоит в том, чтобы элемент перемещался на 1024 пикселя вправо и исчезал. И все, он не сбрасывается, анимация просто заканчивается.

Я пытаюсь добиться этого с помощью новой спецификации веб-анимации. Вот полифилл на github: https://github.com/web-animations/web-animations-js

Вот код, который я использую для анимации, но он просто затемняет элемент, а затем сбрасывает его до полной непрозрачности. Он не двигается. И я не хочу, чтобы он сбрасывался, когда это было сделано.

var player = document.timeline.play(new Animation(document.querySelector('.right'), [ {opacity: "1.0", left:0}, {opacity: "0.0", left:"1024px"}], {direction: "forwards", duration: 1000}));

Вот скрипт JS с этим кодом и полифилом: http://jsfiddle.net/Wz8A8/

Обновление: кажется, что за один раз анимируется только одно свойство. Любые идеи о том, как я могу сделать более одного свойства? Также возможно ли просто сделать «до» конечных значений вместо того, чтобы начинать с ключевого кадра, просто заканчивая ключевым кадром?


javascript animation html polymer web-animations
person wordSmith    schedule 23.06.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Если вы хотите, чтобы анимация продолжалась до конца, вам нужно присвоить ей fill из 'forwards' (а не 'forward', как указано в документации в нескольких местах (что уже исправлено).

Заставить его анимировать свойство left немного сложно. Если transform: 'translate(...)' работает для вас, анимация анимируется довольно плавно (потенциальный недостаток в том, что она имеет очень ограниченное влияние на рендеринг остальной части страницы).

Рабочий пример: http://jsfiddle.net/Wz8A8/6/

var player = document.timeline.play(
  new Animation(document.querySelector('.right'), [ 
      {opacity: "1.0", transform:'translateX(0)'}, 
      {opacity: "0.0",  transform:'translateX(100)'}
    ], 
    {direction: "forwards", duration: 1000, fill: 'forwards'}));
person Peter Burns    schedule 23.06.2014
comment
Большое спасибо! Почему вы использовали перевод вместо левого? Выяснил, что по отдельности, когда один, работает нормально. Но когда с другим свойством, это не работает. - person wordSmith; 24.06.2014
comment
Есть ли разница в производительности, если вы используете translate3d вместо translateX? - person Matěj Kříž; 04.10.2014