Chuyển tiếp CSS3 - Cách trì hoãn đặt lại thuộc tính z-index?

Question

Về cơ bản, một lớp "nổi bật" được thêm vào các phần tử có lớp "cạnh" động thông qua javascript trên con trỏ chuột. Lớp đánh dấu được loại bỏ trên mouseleave. Tôi muốn chuyển đổi màu đường viền của các yếu tố này. Tuy nhiên, lớp "highlight" này cũng thay đổi thứ tự stack. Tôi muốn z-index 1 được đặt trên tất cả các cạnh được đánh dấu trước khi quá trình chuyển đổi bắt đầu (trên con trỏ chuột) và tôi muốn chỉ mục z bị xóa sau khi quá trình chuyển đổi hoàn tất (trên mouseleave). Hiện tại thuộc tính z-index được đặt lại ngay sau khi lớp "đánh dấu" bị xóa.

cơ bản thiết lập:

.edge { 

    border-color: hsl(0, 0%, 40%); 
    border-style: solid; 
    border-width: (set appropriately in another selector); 

    transition-duration: 1s; 
    -moz-transition-duration: 1s; 
    -o-transition-duration: 1s; 
    -webkit-transition-duration: 1s; 

    transition-property: border-color; 
    -moz-transition-property: border-color; 
    -o-transition-property: border-color; 
    -webkit-transition-property: border-color; 
} 

.edge.highlight { 
    border-color: hsl(0, 0%, 85%); 
    z-index: 1; 
} 

nỗ lực đầu tiên (rõ ràng sự chậm trễ ấn định thời gian trên một đầu và messes nó lên trên kia):

.edge { 
    border-color: hsl(0, 0%, 40%); 
    border-style: solid; 
    border-width: (set appropriately in another selector); 

    transition-duration: 1s, 0; 
    -moz-transition-duration: 1s, 0; 
    -o-transition-duration: 1s, 0; 
    -webkit-transition-duration: 1s, 0; 

    transition-delay: 0, 1s; 
    -moz-transition-delay: 0, 1s; 
    -o-transition-delay: 0, 1s; 
    -webkit-transition-delay: 0, 1s; 

    transition-property: border-color, z-index; 
    -moz-transition-property: border-color, z-index; 
    -o-transition-property: border-color, z-index; 
    -webkit-transition-property: border-color, z-index; 
} 

Bất kỳ và tất cả sự giúp đỡ rất nhiều đánh giá cao. Cảm ơn trước.

chỉnh sửa: Hãy nhớ rằng người dùng có thể di chuột qua/mouseleave trên nhiều cạnh khác nhau trước khi quá trình chuyển đổi có cơ hội hoàn thành. Cảm ơn.

Answer 1

Sử dụng transition-delay. Bạn có thể làm cho nó để nó tăng trên di chuột nhưng chờ đợi một thời gian trước khi chìm trên di chuột ra bằng cách chỉ định một thời gian trễ khác nhau cho các yếu tố khi nó ở trong trạng thái di chuột của nó.

Ví dụ: http://jsfiddle.net/vQqzK/1/

này hoạt động trong chrome, không chắc chắn nếu nó sẽ làm việc trong các trình duyệt khác.

https://developer.mozilla.org/en/CSS/transition-delay

Answer 2

Bạn có thể sử dụng hai lớp, một cho mỗi sự chuyển tiếp (người đầu tiên cho màu sắc, sau đó cho z-index). Lưu ý rằng sau đây được thực hiện bằng cách sử dụng jQuery cho thuận tiện, và nó chỉ cho một cạnh. Để làm như vậy cho nhiều cạnh, bạn cần phải lưu trữ một bộ đếm thời gian cho mỗi cạnh.

Với đánh dấu sau:

​<div class="edge"></div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

CSS:

.edge { 
    width:40px; 
    height:40px; 
    border-color: hsl(0, 0%, 40%); 
    border-style: solid; 
    border-width: (set appropriately in another selector); 

    transition-duration: 1s; 
    -moz-transition-duration: 1s; 
    -o-transition-duration: 1s; 
    -webkit-transition-duration: 1s; 

    transition-property: border-color; 
    -moz-transition-property: border-color; 
    -o-transition-property: border-color; 
    -webkit-transition-property: border-color; 
} 

.edge.highlight { 
    border-color: hsl(0, 0%, 85%); 
    z-index: 1; 
} 
.edge.endHl{ 
    border-color: hsl(0, 0%, 65%); 
    z-index: 1; 
} 

(tôi đã thêm một sự thay đổi màu sắc chút về quá trình chuyển đổi thứ hai chỉ để hiển thị nó).

Và JS sau:

var myTime = null; 
function resetTime() { 
    if (myTime !== null) { 
     clearTimeout(myTime); 
     myTime = null; 
    } 
} 
$(".edge").mouseenter(function() { 
    resetTime(); 
    $(this).addClass("highlight"); 
    $(this).removeClass("endHl"); 
}); 
$(".edge").mouseleave(function() { 
    resetTime(); 
    myTime = setTimeout(function() { 
     $(".edge").removeClass("endHl"); 
    },1000); 
    $(this).removeClass("highlight"); 
    $(this).addClass("endHl"); 
}); 

Nó sẽ loại bỏ các z-index chỉ sau 1 giây, và sẽ chỉ áp dụng trên lối ra.

Bạn có thể nhìn thấy nó trong hành động ở đây: http://jsfiddle.net/TptP8/

Answer 3

Bạn có thể sử dụng một sự chậm trễ, như Jcubed đề nghị, hoặc các chức năng thời gian step-end và step-start. Bí quyết là sử dụng hai khác nhau timing functions: bước cho z-index và tuyến tính cho opacity và các thuộc tính liên tục khác.

edge { 
    z-index: -1; 
    opacity: 0; 
    transition: z-index 0.5s step-end, opacity 0.5s linear; 
} 

edge.highlight { 
    z-index: 1; 
    opacity: 1; 
    transition: z-index 0.5s step-start, opacity 0.5s linear; 
} 

Ví dụ: http://jsfiddle.net/cehHh/8/