Dev Faq
0
votes

Afficher Aucun après la fin de l'animation CSS

J'ai une animation de travail qui commence à charger avec Pure CSS. Le problème avec les deux opacité code> et La visibilité code> est que même si la div est cachée, elle prend toujours de la place.

Question H2>

Comment puis-je Rendre la div des Div Disheur Comme Affichage: Aucun Code> Une fois l'animation terminée? P>

Notes H2>
  • Je préférerais avoir une solution pure CSS. La solution moindre pirate, mieux c'est. Li>
  • J'ai vu des questions similaires, mais pas exactement ce cas et pas de bonnes réponses pour ce problème. Li>
  • J'utilise Animation code> et non transition code> car il anime la charge. li> ul>

    p> 

    <div class="message success">
  Success!
</div>

This text below is expected to jump up after animation is done.

0 commentaires

3 Réponses :

0
votes

Voilà, je pense que c'est ce que vous voulez.

en donnant hauteur code> à 0 code> fonctionne parfaitement avec transition code> p> p> blockQuote>

p> 

<div class="message success">
  Success!
</div>

This text below is expected to jump up after animation is done.

2 commentaires

Oui cela fonctionne. Ce que j'ai oublié dans mon extrait, c'est que j'ai aussi un rembourrage. Avec rembourrage, cette solution ne retirez qu'une partie de l'espace. J'ai mis à jour ma question.

OH NP ça arrive! Ensemble Padding ainsi que dans Animation formulaire max à min

1
votes

Vous pouvez utiliser la propriété hauteur pour obtenir cet effet: xxx

hauteur est conservé auto Jusqu'à proximité de la fin de l'animation (99%), alors réglez sur 0 tel qu'il complète.

3 commentaires

Cela fonctionne, tant qu'il n'y a pas de rembourrage. S'il y a un rembourrage, cela prendra encore une partie de l'espace.

Pouvez-vous définir le rembourrage à zéro dès que l'animation frappe 100%?

Oui, ça a fonctionné! Je fixe le rembourrage sur 99%, puis à 0 à 100%. Fonctionne parfaitement. Merci!

1
votes

Vous pouvez régler zéro le rembourrage et la taille de la police à la dernière image clé

p> 

<div class="message success">
  Success!
</div>

This text below is expected to jump up after animation is done.

0 commentaires

Articles qui pourrait vous intéresser :

Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Mettez en surbrillance l'élément d'étiquette après avoir cliqué sur la case à cocher
Changer la direction de défilement de la page Web sur la version mobile
Target first-child css styled-components