Transition CSS lorsque la classe est supprimée

Question

J'ai un formulaire qui fonctionne comme une page de configuration. Lorsque les éléments du formulaire sont modifiés, ils sont marqués en tant que unsaved et ont une couleur de bordure différente. Lorsque le formulaire est sauvegardé, ils sont marqués comme sauvegardés en ayant une autre couleur de bordure.

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

L'ordre sera exécuté :

<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 à faire en sorte qu'une transition CSS3 se déclenche lorsque la classe saved est supprimée, elle pourrait s'effacer et tout irait pour le mieux. Actuellement, je dois l'animer manuellement (à l'aide d'un plug-in, bien sûr), mais cela semble saccadé, et j'aimerais faire passer le code en CSS3 pour qu'il soit plus fluide.

J'ai seulement besoin que cela fonctionne avec Chrome et Firefox 4+, mais d'autres seraient bienvenus.

CSS :

Voici le CSS associé :

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

J'aimerais travailler dans la transition suivante (ou quelque chose d'approchant) :

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;

Remarque :

Personnellement, je ne suis pas d'accord avec ce schéma d'interaction avec l'utilisateur, mais c'est ce que souhaite notre responsable logiciel. S'il vous plaît, ne me suggérez pas de changer la façon dont il fonctionne actuellement. Je vous remercie.

Answer 1

Les transitions CSS permettent de définir deux états pour l'objet à l'aide de CSS. Dans votre cas, vous définissez l'aspect de l'objet lorsqu'il a la classe "saved" et vous définissez son apparence lorsqu'il n'a pas la classe "saved" (c'est l'aspect 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 l'élément "saved" classe.

Si les paramètres de transition CSS s'appliquent à l'objet (sans l'option "saved" ), elles s'appliqueront aux deux transitions.

Nous pourrions vous aider plus précisément si vous incluiez toutes les feuilles de style CSS que vous utilisez dans le code HTML que vous avez fourni.

D'après votre code HTML, je pense que vos paramètres CSS de transition ne s'appliquent qu'aux éléments suivants .saved et donc, lorsque vous l'enlevez, il n'y a pas de contrôle pour spécifier un paramètre CSS. Vous pouvez ajouter une autre classe ".fade" que vous laissez en permanence sur l'objet et vous pouvez spécifier vos paramètres de transition CSS sur cette classe afin qu'ils soient toujours en vigueur.

Answer 2

La réponse de @jfriend00 m'aide à comprendre la technique pour animer seulement supprimer (et non ajouter ).

Une classe "de base" doit avoir transition (comme transition: 2s linear all; ). Cela permet d'activer les animations lorsqu'une autre classe est ajoutée ou supprimée sur cet élément. Mais pour désactiver l'animation lors de l'ajout d'une autre classe (et n'animer que la suppression d'une classe), 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 (uniquement nécessaire pour 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);
}

plongeur de cet exemple.

Avec ce code, seule la suppression de recently-updated sera animée.

Answer 3

En gros, configurez votre css comme suit :

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

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

Answer 4

Dans mon cas, j'avais un problème avec la transition de l'opacité et celui-ci l'a résolu :

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

Souris Entrée

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

Congé de la souris

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