Css Alt öğe için vurgulu çalma üzerinde geçiş

Question

Bir üst öğenin üzerine geldiğinde alt öğenin görüntülenmesini duraklatmaya çalışıyorum.

Html:

<span> 
    <div>This Is The Child</div> 
    Some Text in the span 
</span> 

Css: Bu gösterilmeden önce

şimdi, yayılma süpürdü zaman itibariyle

span { 
    position: relative; 
} 
span div { 
    display: none; 
    width: 0px; 
    opacity: 0; 

    transition: width 5s; 
    -webkit-transition: width 5s; 

    transition: opacity 5s; 
    -webkit-transition: opacity 5s; 
} 
span:hover div { 
    display: inline-block; 
    width: 150px; 
    opacity: 1; 
}​ 

div gecikmeye sahiptir. Düzeltmek için nasıl giderim yani bir duraklama var? Burada

Fiddle: http://jsfiddle.net/SReject/vmvdK/

birkaç not:
Başlangıçta ekranı geçiş çalıştı, ama Edward belirttiği gibi, bu mümkün değildir ve duyu olan da, değil yukarıda denedi

çalışma t

o herhangi bir "ekran" mülkiyet stil oluyor herhangi bir geçiş animasyonları duracaktır "geçişe" gibi görünmektedir ÇÖZÜLDÜ. Bu etrafında çalışmak için. Çocuğun genişliğini 0px olarak ayarlıyorum ve tamamen şeffaf olmasını sağlıyorum. Sonra içinde stil, ben doğru genişliğini ayarlayın ve katı div yapmak "geçişe":

Html:

<span> 
    <div>This Is The Child</div> 
    Some Text in the span 
</span> 

Css:

span { 
    position: relative; 
} 
span div { 
    position: absolute; 

    width: 0px; 
    opacity: 0; 
    transition: opacity 5s; 
    -webkit-transition: opacity 5s; 
} 
span:hover div { 
    width: 150px; 
    opacity: 1; 
}​ 

Fiddle burada: http://jsfiddle.net/SReject/vmvdK/

Answer 1

MDN page on CSS transitions tarafından başvurulan CSS geçişlerinde numaralı telefona göre display özelliği taşınabilen biri değildir. bahsettiğimiz: Orada geçişini yapmak isteyeceğiniz birkaç özellikler veya değerler vardır, ama yazının yazıldığı unspecced ve desteklenmeyen hem hangi

: Gradyan

dahil

• background-image ... hiçbiri ve her şeyden arasındaki
• display

div ürününüzün transition: display 5s; özelliğini uygulamak hiç etkili değil.

DÜZENLEME:

güncellenmiş kod dayanarak, donukluk ile istediğiniz etkiyi elde etmek ve sürece display özelliği belirtmek olarak genişliği olabilir. Basitçe span div bölümünden hattını

display: none; 

kaldırmak ve bunun üzerine geldiğinizde açılan menü belirtilen geçişleri kullanacaktır.

display:inline-block için display:none; geçiş animasyonlu olamaz yana

bu tesis muhtemelen sadece geçişin sonunda değiştirilir - yani div hala görünmez iken donukluk canlandırır.

Answer 2

-webkit-transition-delay: ; kullanmayı denediniz mi? Eğer değilse, bu aradığınız bir şey olabilir mi?

kodunda bazı değişiklikler mü:

span div { 
position: absolute; 
left: 5px; 
top: 5px; 
border: 1px solid #000; 
background-color: #888; 
width: 0px; 
opacity: 0; 
cursor: pointer; 

}

span:hover div { 
display: inline-block; 
-webkit-transition-delay: 2s; 
width: 150px;    
opacity: 1; 

}

Ve buralarda `

This Is The ChildSome Text in the DIV

` bir demo