4

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?

1 Resposta 1

4

A documentação diz:

All animated properties should be animated to a single numeric value...

Ou seja, o transform e o filter usados não possuem apenas um valor numérico, logo não irão funcionar com o animate.

O que você pode fazer para contornar é adicionar uma classe que possui as propriedades que deseja:

let ArwDw = $('#ArrowDown');
let ArwAnimationEnd = true;
ArwDw.click(() => {
    if(ArwAnimationEnd)
    {
        ArwAnimationEnd = false;
        ArwDw.addClass("animate");
        setTimeout(()=>{ArwAnimationEnd = true;},150);
    }
});
:root
{
    --Color2: #ff608b;
}

.ArrowsPh
{
    cursor: pointer;
    fill: var(--Color2);
}
.animate {
  transition: all 150ms;
  transform: scale(85%);
  filter: opacity(0.8) grayscale(0.3) saturate(0.7);
}
<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>

2
  • 1
    Entendi, não tinha lido essa parte na documentação brigadão vei
    – JAMDev
    Commented 3/09/2021 às 23:48
  • Disponha, amigo. QQ dúvida pode perguntar. Abs!
    – Sam
    Commented 4/09/2021 às 3:14

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .