Web Animations API это плагин?

213
18 апреля 2018, 07:45

С помощью Web Animations API можно делать анимации. Такие же как в jQ только на чистом JS. Объясните эта возможность появилась в ES6 или это нужно подключать плагином как дополнение к стандартному JS?

Answer 1

Это не плагин. И не стандартная возможность... пока что.
Сейчас данный API экспериментальный, он в стадии черновика и на пути к стандарту.

В современных браузерах уже реализована поддержка. И хотя она еще не полная - побаловаться уже можно, если есть желание.

Имхо: сейчас в любом случае лучше держаться CSS-анимаций... они не только лучше поддерживаются, но и банально удобнее.
jQuery? Не, не слышал. Но звучит как что-то устаревшее))

Пример использования метода animate() из данного API:

let el = document.getElementById('test'),  
    chrs = el.textContent.split(''),  
    html = '';  
for (let i in chrs) 
  html += (chrs[i] === 'о') ? '<span>о</span> ' : chrs[i];  
el.innerHTML = html;  
 
let os = el.querySelectorAll('span');  
for (let o of os)  
  o.animate({ 
    transform: [ 
      'scaleX(1.2)',  
      'translateY(-0.5em) scale(1, 1.2)',  
      'translateY(-0.7em) scale(1.5, 0.5)' 
    ]}, 
    { duration: 200, ease: 'ease-out', iterations: Infinity, direction: 'alternate' } 
  );  
 
el.animate([ 
    { offset: 0, transform: 'scaleY(0)', left: '0', top: '1em', color: '#000' }, 
    { transform: 'scaleY(0)', offset: 0.10 }, 
    { transform: 'none',      offset: 0.15, ease: 'ease-in' }, { 
      transform: 'none', left: '0', top: '1em',  
      offset: 0.35 
    }, { 
      transform: 'translate(-50%, -50%)',  
      left: '50vw', top: '50vh',  
      offset: 0.375, ease: 'ease-out' 
    }, { 
      transform: 'translate(-50%, -50%)',  
      left: '50vw', color: '#f00', 
      offset: 0.50 
    }, { 
      transform: 'rotateY(90deg) translate(-50%, -50%)',  
      left: 'calc(50vw - 210px)', color: '#f00',  
      offset: 0.55 
    }, { 
      transform: 'translate(-50%, -50%)', left: '50vw',  
      offset: 0.60 
    }, { 
      transform: 'translate(-50%, -50%)',  
      left: '50vw', top: '50vh', color: '#07f',  
      offset: 0.75 
    }, { 
      transform: 'none', left: '0', top: '1em',  
      offset: 0.775, ease: 'ease-out' 
    }, 
    { transform: 'none',      offset: 0.85},  
    { transform: 'scaleY(0)', offset: 0.90}, 
    { offset: 1, transform: 'scaleY(0)', left: '0', top: '1em', color: '#000' } 
  ],  
  { duration: 12000, iterations: Infinity} 
); 
#test { 
  position: absolute; left: 0; top: 1em;  
  width: 420px; text-align: center;  
  font: 18px monospace;  
} 
#test > span { position: absolute; }
<span id="test">Подключать что-либо - совсем не нужно.</span>

READ ALSO
Фильтрация js в webview

Фильтрация js в webview

Доброго времени сутокИнтересует, возможно ли, так сказать, в режиме реального времени включать/выключать выполнение js через webview

176
:class не работает динамически

:class не работает динамически

Добрый деньЕсть такой код: Ссылка на гитхаб

188
реализовать конечный автомат

реализовать конечный автомат

пытаюсь создать вымышленный конечный автоматпоследовательность выполнения действий в программе: 1) заполняю элементами списки alphabet, listStates,...

224
InputMask для Android

InputMask для Android

Использую плагин InputMask и столкнулся с такой проблемой: пользователи жалуются, что на некоторых устройствах (телефоны на Android OS) не вводится...

228