To com um problema com o box-shadow, tenho a seguinte linha: box-shadow: -300px -300px 300px var(--roxo) inset;
Toda vez que uso box-shadow com um tamanho bem alto como neste caso as animações e transições ficam muito lento quase travando ou quando eu passo o mouse por exemplo em cima de um botão com :hover o box-shadow dá uma tremida, mesmo que eles não se comuniquem. Queria saber como resolver o problema das animações e transições ficarem lentas e bugadas quando o box-shadow fica muito alto.
-
Relacionada, mas tb está sem resposta a mais de 2 anos... pt.stackoverflow.com/questions/339175/…– hugocslCommented 7/01/2021 às 11:26
-
Adicione tb o seu código atual para a gente poder testar exatamente o senário que vc tem ai, inclua o html e css mínimos para podermos simular o seu problema– hugocslCommented 7/01/2021 às 12:49
Adicione um comentário
|
1 Resposta
Acontece que de fato o box-shadow
é lento, pois precisa ser re-desenhado em todo frame durante a animação, o que faz com que as transições fiquem mais pesadas.
O ideal para solucionar isso é manter um pseudo-elemento renderizado com opacity: 0
e animar essa opacidade.
.shadow {
display: flex;
align-items: center;
width: 300px;
height: 300px;
margin: 50px;
float: left;
box-sizing: border-box;
padding: 30px;
font-family: sans-serif;
font-size: 18px;
text-align: center;
border-radius: 50px;
}
#slow-transition {
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
transition: box-shadow 500ms;
}
#slow-transition:hover {
box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.5);
}
#fast-transition {
position: relative;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
}
#fast-transition::before {
content: ' ';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 50px;
box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 500ms;
}
#fast-transition:hover::before {
opacity: 1;
}
<div id="slow-transition" class="shadow">
<p>Box-Shadow normal com transição lenta</p>
</div>
<div id="fast-transition" class="shadow">
<p>Transição rápida da opacidade de pseudo-elemento</p>
</div>