web-dev-qa-db-fra.com

Transition CSS lorsque la classe est supprimée

J'ai un formulaire qui fonctionne comme une page de paramètres. Lorsque les éléments de formulaire sont modifiés, ils sont marqués comme unsaved et ont une couleur de bordure différente. Lorsque le formulaire est enregistré, ils sont marqués comme ayant une autre couleur de bordure.

Ce que je veux, c'est que lorsque le formulaire est enregistré, la bordure s'estompe progressivement.

La commande ira:

<input type='text' class='unsaved' /> Not saved yet, border is yellow
<input type='text' class='saved' />   Saved, so the border is green
<input type='text' class='' />        Fade out if coming from class saved

Si je parviens à déclencher une transition CSS3 lorsque la classe saved est supprimée, elle pourrait disparaître progressivement et tout serait simplifié. Actuellement, je dois l'animer manuellement (à l'aide d'un plug-in, bien sûr), mais cela semble agité, et j'aimerais déplacer le code vers CSS3 pour qu'il soit plus fluide.

Je n’ai besoin que de cela pour fonctionner dans Chrome et Firefox 4+, bien que d’autres soient Nice.

CSS:

Voici le CSS associé:

.unsaved {
    border: 3px solid #FFA500;
    padding: 0;
}
.saved {
    border: 3px solid #0F0;
    padding: 0;
}

Je voudrais travailler dans la transition suivante (ou quelque chose comme ça):

border-color: rgba(0,0,0,0);
-webkit-transition: border-color .25s ease-in;  
-moz-transition: border-color .25s ease-in;  
-o-transition: border-color .25s ease-in;  
transition: border-color .25s ease-in;

Note:

Personnellement, je ne suis pas d'accord avec ce schéma d'interaction utilisateur, mais c'est ainsi que notre responsable logiciel le souhaite. S'il vous plaît ne suggérez pas que je change la façon dont cela fonctionne actuellement. Merci!

csscss3css-transitions
68
beatgammit

Les transitions CSS fonctionnent en définissant deux états pour l'objet à l'aide de CSS. Dans votre cas, vous définissez l'apparence de l'objet lorsqu'il a la classe "saved" et vous définissez son apparence quand il n’a pas la classe "saved" (c'est normal). Lorsque vous supprimez la classe "saved", il passera à l’autre état en fonction des paramètres de transition en place pour l’objet sans le "saved" classe.

Si les paramètres de transition CSS s’appliquent à l’objet (sans le "saved" class), ils s’appliqueront aux deux transitions.

Nous pourrions vous aider plus précisément si vous incluiez tous les CSS pertinents que vous utilisez dans le code HTML que vous avez fourni.

Mon hypothèse est que vos paramètres CSS de transition s’appliquent uniquement à .saved et donc, lorsque vous le supprimez, aucun contrôle ne permet de spécifier un paramètre CSS. Vous voudrez peut-être ajouter une autre classe ".fade" que vous laissez tout le temps sur l’objet et que vous pouvez spécifier vos paramètres de transition CSS pour cette classe afin qu’ils soient toujours appliqués.

60
jfriend00

La réponse de @ jfriend00 m'aide à comprendre la technique pour animer uniquement supprimer classe (pas ajouter).

Une classe "base" devrait avoir la propriété transition (comme transition: 2s linear all;). Cela active les animations quand une autre classe est ajoutée ou supprimée sur cet élément. Mais pour désactiver l'animation quand une autre classe est ajoutée (et seulement pour supprimer une classe animée), nous devons ajouter transition: none; à la deuxième classe.

Exemple

CSS:

.issue {
  background-color: lightblue;
  transition: 2s linear all;
}

.recently-updated {
  background-color: yellow;
  transition: none;
}

HTML:

<div class="issue" onclick="addClass()">click me</div>

JS (seulement nécessaire d'ajouter une classe):

var timeout = null;

function addClass() {
  $('.issue').addClass('recently-updated');
  if (timeout) {
    clearTimeout(timeout);
    timeout = null;
  }
  timeout = setTimeout(function () {
    $('.issue').removeClass('recently-updated');
  }, 1000);
}

plunker de cet exemple.

Avec ce code, ne supprimez que recently-updated La classe sera animée.

20
Ruslan Stelmachenko

Fondamentalement, configurez votre css comme suit:

element {
  border: 1px solid #fff;      
  transition: border .5s linear;
}

element.saved {
  border: 1px solid transparent;
}
12
Ken Wheeler

Dans mon cas, j'ai eu un problème avec la transition de l'opacité, donc celui-ci corrige ça:

#dropdown {
    transition:.6s opacity;
}
#dropdown.ns {
    opacity:0;
    transition:.6s all;
}
#dropdown.fade {
    opacity:1;
}

Souris entrer

$('#dropdown').removeClass('ns').addClass('fade');

Laisser la souris

$('#dropdown').addClass('ns').removeClass('fade');
1
user956584