0
votes

JavaScript: Comment faire de la transition de fondu et de sortie lorsque vous appuyez sur le bouton?

Je suis nouveau à JavaScript et je tiens à demander quel est le moyen le plus simple de créer une transition de fondu et de sortie? Dans mon cas, je dois montrer / masquer des éléments div. Toute aide est grandement appréciée!

Le JavaScript pour mon formulaire est affiché ci-dessous p> xxx pré>

le CSS pour mon formulaire: p>

email = forms.EmailField(
    label = '', 
    widget = forms.TextInput(attrs = {'placeholder': 'Email', 'class':'email'}), 
    max_length = 60
)

javascript django html css

0 commentaires

3 Réponses :

3
votes

Vous devriez essayer l'attribut style opacité . Par exemple. Une feuille de style comme celle-ci rendra quelque chose de disparaître lorsque vous ajoutez le fané code> -Class. Ensuite, vous devez le faire le temps avec un autre changement avec le Tâce: Aucun; code> -Property après cela.

.item  {
  transition: 0.5s;
  opacity: 1;
}

.item.faded-out {
  opacity: 0;
}

0 commentaires

1
votes

Animate.css possède plusieurs animations que vous pouvez utiliser pour votre projet. Il a fondu et sortie d'animation. Il est simple à utiliser, il vous suffit d'ajouter le nom de la classe à l'élément que vous souhaitez.

L'alternative utilise le code suivant: xxx

0 commentaires

0
votes

Prendre la suggestion de BHAVESH à l'aide d'Animate.css, à l'aide de JavaScript est une autre solution en détectant le bouton Cliquez et en ajoutant / supprimant les attributs de classe d'animate.css. Un exemple de code de la manière de faire cela est affiché ci-dessous.

 <button class="btn-back" type="button" onclick="registerBack()">Back</button>
 <button class="btn-next" type="button"  onclick="registerNext()">Next</button>




function registerNext(){
    form_group_2.classList.add('animate__animated', 'animate__fadeIn');
}

function registerBack(){
    form_group_2.classList.remove('animate__animated', 'animate__fadeIn');
    form_group_1.classList.add('animate__animated', 'animate__fadeIn');
}

0 commentaires