CSS3 전환 - Z- 색인 속성 재설정을 지연하는 방법?

Question

기본적으로 "강조 표시"클래스는 mouseenter의 javascript를 통해 "edge"클래스가있는 요소에 동적으로 추가됩니다. 강조 표시 클래스는 mouseleave에서 제거됩니다. 이러한 요소의 테두리 색을 전환하고 싶습니다. 그러나이 "강조 표시"클래스도 스택 순서를 수정합니다. 나는 z 좌표 1을 모든 강조된 가장자리에 설정하고 전환이 시작되기 전에 (mouseenter에서), 전환 완료 후 (mouseleave에서) 1의 Z- 색인을 제거하기를 원합니다. 현재 z- 색인 속성은 "강조 표시"클래스가 제거 된 직후에 재설정됩니다.

기본 기능 설정 :

.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; 
} 

(분명히 지연이 한쪽 끝에서 타이밍을 고정하고 다른 그것을 망쳐 놨)

첫 번째 시도 :

.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; 
} 

하나를 모든 도움을 아주 많이 고맙습니다. 미리 감사드립니다.

편집 : 사용자는 전환이 완료되기 전에 여러 다른 가장자리에서 마우스를 사용할 수 있습니다. 감사.

Answer 1

transition-delay을 사용하십시오. 호버 위에 올리도록 설정할 수 있지만 호버 상태에있을 때 요소에 다른 지연 시간을 지정하여 호버에 침몰하기 전에 잠시 기다립니다.

예 : 이것은 크롬에서 작동 http://jsfiddle.net/vQqzK/1/

, 확실하지가 다른 브라우저에서 작동합니다.

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

Answer 2

하면 (Z 축 인덱스 그리고, 색 첫번째) 두 종류, 각 천이 하나를 사용할 수있다. 다음은 편의상 jQuery를 사용하여 만들어졌으며 하나의 가장자리에만 적용됩니다. 여러 가장자리에 대해 이렇게하려면 가장자리 당 하나의 타이머를 저장해야합니다.

다음과 같은 마크 업을 감안할 때 :

​<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; 
} 

(나는 단지 그것을 보여주기 위해 2 전이에 약간의 색상 변화를 추가).

다음 JS : 그것은 단지 1 초 후에 Z- 색인을 제거하고 오직 출구에 적용

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"); 
}); 

. Jcubed가 제안 http://jsfiddle.net/TptP8/

Answer 3

당신은, 지연을 사용하거나 타이밍 기능 step-end 및 step-start :

현재 작업에서 볼 수 있습니다. 트릭은 두 가지 다른 timing functions을 사용하는 것입니다. z-index을 단계적으로 사용하고 opacity을 선형으로 지정하고 다른 연속 특성을 사용하는 것입니다.

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; 
} 

예 : http://jsfiddle.net/cehHh/8/