刪除類時的CSS轉換

Question

我有一個表單，可以用作設置頁面。當表單元素被修改時，它們被標記爲unsaved並具有不同的邊框顏色。當表單被保存時，它們被標記爲具有另一個邊框顏色的保存。

我想要的是當窗體被保存時，邊框會逐漸淡出。

順序會：

<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 

如果我能得到一個CSS3過渡上課的時候saved被刪除火，那麼它可能淡出，一切都將是沒說的。目前，我必須手動爲它設置動畫效果（當然，使用插件），但它看起來不穩定，我想將代碼移動到CSS3，以便更平滑。

我只需要這個工作在Chrome和Firefox 4+，但其他人會很好。

CSS：

下面是相關的CSS：

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

我想在下面的過渡工作（或類似的東西）：

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; 

注意：

就我個人而言，我不同意這種用戶交互方案，但這就是我們的軟件主管想要的方式。請不要建議我改變它目前的功能。謝謝！

Answer 1

通過使用CSS定義對象的兩個狀態，CSS轉換工作。在你的情況下，你可以定義物體在具有類"saved"時的外觀，並且當它沒有類"saved"（這是正常的樣子）時定義它的外觀。當您刪除類"saved"時，它將根據沒有"saved"類的對象的過渡設置過渡到其他狀態。

如果CSS轉換設置應用於對象（不包含"saved"類），則它們將應用於這兩個轉換。

如果您將所用的所有相關CSS都包含在您提供的HTML中，我們可以提供更具體的幫助。

從我看你的HTML的猜測是，你的過渡CSS設置只適用於.saved，因此當你刪除它時，沒有控件可以指定CSS設置。您可能需要添加另一個類別".fade"，您始終可以在對象上留下，並且您可以在該類上指定CSS轉換設置，以便始終有效。

Answer 2

基本建立你的CSS這樣的：

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

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

Answer 3

對我來說，我有一些問題，不透明度過渡所以這一塊解決這個問題：

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

鼠標進入

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

小鼠假期

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

Answer 4

@ jfriend00的回答有助於我理解僅動畫的技巧刪除類（不是添加）。

「基本」類應具有transition屬性（如transition: 2s linear all;）。這可以在此元素上添加或刪除任何其他類時啓用動畫。但是當添加其他類時禁用動畫（並且僅刪除動畫類），我們需要將transition: none;添加到第二個類中。

例

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（只需要添加類）：

var timeout = null; 

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

0本例的。

使用此代碼只有刪除recently-updated類將動畫。