Bardzo szybki JS - znikający przycisk z Web Animations API

Piszemy z Web Animations API event przycisku, który po wciśnięciu znika na krótką chwilę, po czym pojawia się znowu. Idealne do różnego rodzaju przycisków kopiowania. Wykorzystamy właściwość CSS filter z funkcją opacity oraz Web Animations API.

Nasz przycisk w HTMLu, który złapiemy w JS i będziemy animować:

<button id="btn">Click me</button>

Znająć „filter: opacity” (można także użyć właściwości opacity zamiast filter, też to w CSS mamy) oraz Web Animations API możemy napisać sobie coś takiego:

window.addEventListener('DOMContentLoaded', function(){
            let btn = document.querySelector('#btn');
            btn.addEventListener('click', function(){
                btn.animate([
                
                {filter: 'opacity(.5)'},
                {filter: 'opacity(.3)'},
                {filter: 'opacity(0)'},
                {filter: 'opacity(.3)'},
                {filter: 'opacity(.5)'},
                {filter: 'opacity(.7)'}], 
                {duration: 300, iterations: 1});
            });
            
        });

Potem spędzić kilka/kilkanaście minut na dopieszczaniu animacji co do milisekundy, jeszcze CSS dopieścić (na domyślnym guziku wygląda dobrze, można sobie wyobrazić o ile lepiej będzie na ostylowanym wyglądać) i już mamy naszą animację.

Dobra, to może było za proste, więc zróbmy sobie jeszcze animację zwiększającego się na chwilkę przycisku:

window.addEventListener('DOMContentLoaded', function(){
            let btn = document.querySelector('#btn');
            btn.addEventListener('click', function(){
                btn.animate([
                {transform: 'scale(1.1)'},
                {transform: 'scale(1.2)'},
                {transform: 'scale(1.3)'},
                {transform: 'scale(1.2)'},
                {transform: 'scale(1.1)'},
                ],
                {duration: 200, iterations: 1});
            });   
        });

Bardzo szybki JS – znikający przycisk z Web Animations API