Web Animation API sprawia, że animacje tworzy się w JavaScript bardzo łatwo, szybko i w dodatku lepiej to się komponuje z kodem niż tradycyjne animacje w CSS. Zrobimy „invalid input shake”, ale taki, który działa za każdym wciśnięciem nieprawidłowego przycisku.
Pierwsza rzecz, to nasz element <input>. Tak wygląda w HTML:
<input type="text" placeholder="No spaces" id="myIpt"/>Druga rzecz to funkcja, która nie pozwala przekazywać spacji do inputu:
window.addEventListener('DOMContentLoaded', function(){
let myIpt = document.querySelector('#myIpt');
myIpt.addEventListener('keypress', function ( event ) {
var key = event.keyCode;
if (key === 32) {
event.preventDefault();
}
});
});Teraz pewnie tworzylibyśmy animację w CSS, jakoś ją nadawali poprzez JavaScript, no możemy sobie wyobrazić poziom komplikacji, aby zwykły input shake uzyskać.
A oto, jak to robimy korzystając z Web Animation API:
window.addEventListener('DOMContentLoaded', function(){
let myIpt = document.querySelector('#myIpt');
myIpt.addEventListener('keypress', function ( event ) {
var key = event.keyCode;
if (key === 32) {
event.preventDefault();
myIpt.animate([
{transform: 'translate(1px, 1px)'},
{transform: 'translate(-2px, -2px)'},
{transform: 'translate(2px, 2px)'},
{transform: 'translate(-2px, 3px)'},
{transform: 'translate(2px, -3px)'},
], {duration: 100, iterations: 1});
myIpt.animate([{boxShadow: '0 0 0.6rem #ff0000', outline: 'none'}], {iterations:1, duration: 200});
}
});
});Jeżeli znamy podstawy animacji CSS albo podstawy CSS jako takiego, to ten kod nie będzie nas dziwił ani trochę. Proszę zobaczyć, jak proste to jest, jak zrozumiałe dla każdego, kto animował w CSS, ale o ile łatwiejsze do zaimplementowania w JavaScript (a to dopiero podstawy Web Animation API), wreszcie – jak niewiele potrzeba (także czasu) aby coś takiego napisać.
