Przejście CSS po usunięciu klasy

Question

Mam formularz, który działa jako strona ustawień. Po zmodyfikowaniu elementów formularza są one oznaczone jako unsaved i mają inny kolor obramowania. Po zapisaniu formularza są one oznaczone jako zapisane przez inny kolor obramowania.

Chcę, aby po zapisaniu formularza granica stopniowo zanikała.

Kolejność pójdzie:

<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 

Jeśli mogę uzyskać przejścia CSS3 na ogień, gdy klasa saved zostanie usunięty, może to fade out i wszystko będzie klawy. Obecnie muszę ręcznie ją animować (oczywiście za pomocą wtyczki), ale wygląda na zmienną i chciałbym przenieść kod do CSS3, aby był bardziej płynny.

Potrzebuję tego tylko do pracy w przeglądarce Chrome i Firefox 4+, chociaż inne będą miłe.

CSS:

Oto związane CSS:

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

Chciałbym pracować w następnym przejściu (lub coś podobnego):

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; 

Uwaga:

Osobiście nie zgadzam się z tym schematem interakcji użytkownika, ale tak właśnie chce tego nasz programista. Nie sugeruj, że zmienię sposób, w jaki obecnie działa. Dzięki!

Answer 1

Przejścia CSS działają, definiując dwa stany obiektu za pomocą CSS. W twoim przypadku definiujesz wygląd obiektu, gdy ma on klasę "saved" i definiujesz, jak wygląda, gdy nie ma klasy "saved" (jest to normalny wygląd). Po usunięciu klasy "saved" nastąpi przejście do innego stanu zgodnie z ustawieniami przejścia dla obiektu bez klasy "saved".

Jeśli ustawienia przejścia CSS dotyczą obiektu (bez klasy "saved"), zostaną zastosowane do obu przejść.

Możemy pomóc bardziej szczegółowo, jeśli uwzględnisz wszystkie stosowne arkusze CSS, których używasz z podanym przez Ciebie kodem HTML.

Domyślam się, że podczas przeglądania kodu HTML ustawienia przejściowe CSS mają zastosowanie tylko do .saved, a zatem po usunięciu nie ma elementów sterujących do określania ustawień CSS. Możesz dodać kolejną klasę ".fade", którą pozostawiasz na obiekcie przez cały czas, i możesz określić ustawienia przejścia CSS dla tej klasy, aby były zawsze aktywne.

Answer 2

Zasadniczo skonfigurować swoją css jak:

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

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

Answer 3

w moim przypadku miałem pewne problemy z przejściem krycia więc ten go naprawić:

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

Mouse Enter

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

Pozostaw mysz

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

Answer 4

znaku @ jfriend00 za odpowiedź pomaga mi zrozumieć technikę animacji tylko usunąć klasę (nie dodać).

Klasa "podstawowa" powinna mieć właściwość transition (np. transition: 2s linear all;). Umożliwia to animacje, gdy dowolna inna klasa zostanie dodana lub usunięta z tego elementu. Ale aby wyłączyć animację po dodaniu innej klasy (i tylko animować usuwanie klasy), musimy dodać drugą klasę do klasy transition: none;.

Przykład

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 (konieczna tylko dodać klasę):

var timeout = null; 

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

plunker tego przykładu.

Za pomocą tego kodu będzie tylko animowane usuwanie klasy recently-updated.