transición de CSS cuando se eliminó la clase

Question

Tengo un formulario que funciona como 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 el formulario, el borde se desvanecerá gradualmente.

El orden va a 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 conseguir una transición CSS3 para disparar cuando se retira la clase saved, entonces podría desaparecer y todo sería miel sobre hojuelas. Actualmente, tengo que animarlo manualmente (usando un complemento, 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 serían buenos.

CSS:

Aquí está la CSS asociada:

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

Me gustaría trabajar en el 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 del 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!

Answer 1

Las transiciones CSS funcionan definiendo dos estados para el objeto utilizando CSS. En su caso, usted define cómo se ve el objeto cuando tiene la clase "saved" y define cómo se ve cuando no tiene la clase "saved" (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 de CSS se aplica al objeto (sin la clase "saved"), se aplicarán a ambas transiciones.

Podríamos ayudarlo más específicamente si incluye todos los CSS relevantes que está utilizando con el código HTML que ha proporcionado.

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

Answer 2

Básicamente configurar su css como:

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

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

Answer 3

En mi caso he tenido algún problema con la transición de opacidad por lo que éste solucionarlo:

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

Ratón dentro

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

Dejar ratón

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

Answer 4

respuesta de @ El jfriend00 me ayuda a entender la técnica para animar solamente eliminar clase (no añadir ).

Una clase "base" debe tener la propiedad transition (como transition: 2s linear all;). Esto habilita animaciones cuando cualquier otra clase se agrega o elimina en este elemento. Pero para deshabilitar la animación cuando se agrega otra clase (y solo la eliminación de clase animada) 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 (sólo es necesario añadir la 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.