Transición CSS cuando se elimina la clase

Tengo un formulario que funciona como una página de configuración. Cuando se modifican los elementos del formulario, se marcan como unsaved y tienen un color de borde diferente. Cuando se guarda el formulario, se marcan como guardados al tener otro color de borde.

Lo que quiero es que cuando se guarde la forma, el borde se desvanezca gradualmente.

La orden irá: 

<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 puedo obtener una transición de CSS3 a fire cuando se elimina la clase saved, entonces podría desvanecerse y todo sería buenísimo. Actualmente, tengo que animarlo manualmente (usando un plug-in, por supuesto), pero parece entrecortado, y me gustaría mover el código a CSS3 para que sea más suave.

Solo necesito esto para trabajar en Chrome y Firefox 4+, aunque otros estarían bien.

CSS:

Aquí está el CSS asociado: 

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

Me gustaría trabajar en la siguiente transición (o algo parecido):

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;

Nota:

Personalmente, no estoy de acuerdo con este esquema de interacción con el usuario, pero así es como nuestro líder de software lo quiere. Por favor, no sugiera que cambie la forma en que funciona actualmente. ¡Gracias!

Author: beatgammit, 2012-03-01
Source

4 answers

Las transiciones CSS funcionan definiendo dos estados para el objeto usando CSS. En su caso, define cómo se ve el objeto cuando tiene la clase "saved" y define cómo se ve cuando no tiene la clase "saved" (es aspecto normal). Cuando elimine la clase "saved", pasará al otro estado de acuerdo con la configuración de transición establecida para el objeto sin la clase "saved".

Si la configuración de transición CSS se aplica al objeto (sin la clase "saved"), entonces aplicar a ambas transiciones.

Podríamos ayudar más específicamente si incluyes todos los CSS relevantes que estás usando con el HTML que has proporcionado.

Mi conjetura de mirar su HTML es que su configuración CSS de transición solo se aplica a .saved y por lo tanto, cuando lo elimina, no hay controles para especificar una configuración CSS. Es posible que desee agregar otra clase ".fade" que deje en el objeto todo el tiempo y puede especificar su configuración de transición CSS en esa clase para que siempre estén en efecto.

 51
Author: jfriend00,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-03-01 00:44:14

La respuesta de @jfriend00 me ayuda a entender la técnica para animar solo remove class (no add).

Una clase "base" debería tener la propiedad transition (como transition: 2s linear all;). Esto habilita animaciones cuando se agrega o elimina cualquier otra clase en este elemento. Pero para deshabilitar la animación cuando se agrega otra clase (y solo se elimina la clase animate) necesitamos agregar transition: none; a la segunda clase.

Ejemplo

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 (solo se necesita agregar clase): 

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 este ejemplo.

Con este código solo se animará la eliminación de la clase recently-updated.

 13
Author: djxak,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-02-15 18:51:57

Básicamente configura tu css como: 

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

element.saved {
  border: 1px solid transparent;
}
 9
Author: Ken Wheeler,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-07-26 08:39:40

En mi caso tuve algún problema con la transición de opacidad, así que este lo arregló: 

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

Mouse Enter

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

Deja el ratón

$('#dropdown').addClass('ns').removeClass('fade');
 1
Author: user956584,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-08-08 09:40:34