Chuyển đổi CSS khi xóa lớp

Question

Tôi có một biểu mẫu hoạt động như một trang cài đặt. Khi các phần tử biểu mẫu được sửa đổi, chúng được đánh dấu là unsaved và có màu đường viền khác. Khi biểu mẫu được lưu, chúng được đánh dấu là đã lưu bằng cách có một đường viền màu khác.

Điều tôi muốn là khi biểu mẫu được lưu, đường viền sẽ dần mờ đi.

Trình tự sẽ đi:

<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 

Nếu tôi có thể nhận được một sự chuyển tiếp CSS3 để bắn khi lớp saved được lấy ra, sau đó nó có thể mờ dần và mọi thứ sẽ hunky-dory. Hiện tại, tôi phải tạo hiệu ứng động bằng tay (bằng cách sử dụng một trình cắm thêm), nhưng có vẻ như bị thay đổi và tôi muốn chuyển mã sang CSS3 để nó sẽ mượt mà hơn.

Tôi chỉ cần điều này để làm việc trong Chrome và Firefox 4+, mặc dù những người khác sẽ tốt đẹp.

CSS:

Đây là CSS liên quan:

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

Tôi muốn làm việc trong quá trình chuyển đổi sau đây (hoặc một cái gì đó giống như nó):

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; 

Lưu ý:

Cá nhân, tôi không đồng ý với chương trình tương tác người dùng này, nhưng đó là cách mà người lãnh đạo phần mềm của chúng tôi muốn nó. Xin vui lòng không đề nghị rằng tôi thay đổi cách nó hoạt động hiện tại. Cảm ơn!

Answer 1

Chuyển đổi CSS hoạt động bằng cách xác định hai trạng thái cho đối tượng bằng cách sử dụng CSS. Trong trường hợp của bạn, bạn xác định cách đối tượng trông như thế nào khi nó có lớp "saved" và bạn xác định nó trông như thế nào khi nó không có lớp "saved" (đó là giao diện bình thường). Khi bạn xóa lớp "saved", nó sẽ chuyển sang trạng thái khác theo cài đặt chuyển tiếp tại chỗ cho đối tượng không có lớp "saved".

Nếu cài đặt chuyển tiếp CSS áp dụng cho đối tượng (không có lớp "saved"), thì chúng sẽ áp dụng cho cả hai chuyển tiếp.

Chúng tôi có thể trợ giúp cụ thể hơn nếu bạn bao gồm tất cả CSS có liên quan mà bạn đang sử dụng với HTML bạn đã cung cấp.

Đoán của tôi khi xem HTML là cài đặt CSS chuyển tiếp của bạn chỉ áp dụng cho .saved và do đó khi bạn xóa, không có điều khiển để chỉ định cài đặt CSS. Bạn có thể muốn thêm một lớp khác ".fade" mà bạn để lại trên đối tượng mọi lúc và bạn có thể chỉ định cài đặt chuyển tiếp CSS của bạn trên lớp đó để chúng luôn có hiệu lực.

Answer 2

Về cơ bản thiết lập css của bạn như:

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

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

Answer 3

Trong trường hợp của tôi, tôi đã có một số vấn đề với quá trình chuyển đổi opacity vì vậy một này có khắc phục nó:

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

Chuột Nhập

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

Chuột Rời khỏi

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

Answer 4

Câu trả lời của @ jfriend00 giúp tôi hiểu kỹ thuật này chỉ hoạt động xóa lớp (không phải thêm).

Lớp "cơ sở" phải có transition thuộc tính (như transition: 2s linear all;). Điều này cho phép hoạt ảnh khi bất kỳ lớp nào khác được thêm vào hoặc bị xóa trên phần tử này. Nhưng để vô hiệu hóa hoạt ảnh khi lớp khác được thêm vào (và chỉ loại bỏ lớp animate), chúng ta cần thêm transition: none; vào lớp thứ hai.

Ví dụ

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 (chỉ cần thiết để thêm class):

var timeout = null; 

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

plunker của ví dụ này.

Với mã này chỉ xóa lớp recently-updated sẽ được làm động.