Quero usar o "animate()" para passar um feedback para o usuáro após um click, mas a animação não esta acontecendo.
Eu usei o css para determinar qual seria o estado final da animação e lá, funcionou, o objeto ficou com as propriedades que eu queria, mas quando passei as propriedades pro "animate", simplesmente não funcionou, o objeto continua igual ao momento antes do click.
Um pedaço do código:
let ArwDw = $('#ArrowDown');
let ArwAnimationEnd = true;
ArwDw.click(() => {
if(ArwAnimationEnd)
{
ArwAnimationEnd = false;
ArwDw.animate({transform: 'scale(85%)', filter: 'opacity(0.8) grayscale(0.3) saturate(0.7)'}, 150, 'swing', () => {ArwAnimationEnd = true});
}
});
:root
{
--Color2: #ff608b;
}
.ArrowsPh
{
cursor: pointer;
fill: var(--Color2);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg id="ArrowDown" width="90px" height="90px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 21">
<g transform="translate(-254 -232)">
<path class="ArrowsPh" d="M107.741,10.99l-8.3,8.6a1.318,1.318,0,0,1-1.911,0,1.437,1.437,0,0,1,0-1.981L104.875,10,97.535,2.391a1.437,1.437,0,0,1,0-1.981,1.318,1.318,0,0,1,1.911,0l8.3,8.6a1.436,1.436,0,0,1,0,1.98Z" transform="translate(274.5 139.862) rotate(90)"/>
</g>
</svg>
Oque eu fiz errado? Tem como resolver? O problema é que estou tentando animar um SVG?