CSS geçişini iptal et seçeneğinin işaretini kaldırın

Question

Bir giriş devre dışı olduğunda dönüştürmeyi tersine çevirirken bir sorun yaşıyorum. Hali hazırda geçişin durmadığı gibi, ateşleme hemen anında ön kontrol durumuna geri döner. Kullanmayı denedim: not (: checked) ama bu da çalışmıyor gibi gözüküyor.

sence buraya ne anlama geldiğini görebilirsiniz: Burada

.overlay { 
    position: fixed; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    width: 0; 
    height: 0; 
    opacity: 0; 
    background-color: rgba(0, 0, 0, 0.4); 
    transition-property: opacity; 
    transition-duration: 500ms; 
    transition-delay: 500ms; 
    transition-timing-function: ease-in-out; 
    } 

    .toggle:checked ~ .overlay { 
    width: 100%; 
    height: 100%; 
    opacity: 1; 
    z-index: 2; 
    transition-property: opacity; 
    transition-duration: 500ms; 
    transition-delay: 200ms; 
    transition-timing-function: ease-in-out; 
    } 

    .toggle:not(:checked) ~ .overlay { 
    transition-property: opacity; 
    transition-duration: 500ms; 
    transition-delay: 500ms; 
    transition-timing-function: ease-in-out; 
    } 

sorunu görebileceğiniz bir kalemdir - http://codepen.io/anon/pen/VarVyP. Herhangi bir yardım veya rehberlik takdir edilmektedir.

düzenleme I ters değildir geçiş bindirme opaklık geçiş değildir geçiş çekmece itme olduğunu daha açık olması gerekmektedir. Girişin işaretini kaldırmak, çekmeceyi düzgün bir şekilde hareket ettirir, ancak kaplama, geçişi olmayan önceden kontrol edilen duruma hemen döner.

Answer 1

Temel olarak, ilk yer paylaşım sınıfındaki genişlik ve yüksekliğin yanı sıra z-endeksini tanımlamanız gerekir. Kapatma etiketi kapandığında boyut olarak 0,0 ve açık olduğunda% 100,% 100 görünür. Kapandığında tam boyutta olduğunu söyleme, görünümden gelen çözümdür (Chrome üzerinde test edilmiştir)

DÜZENLEME: Ayrıca, .overlay katmanında, işaretçi olaylarını hiçbiri olarak ayarlayın. Bu şekilde, yalnızca geçiş düğmesine tıklandığında aktif hale getirilir.

.overlay { 
    pointer-events: none; 
    position: fixed; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    width: 0; 
    height: 0; 
    width: 100%; 
    height: 100%; 
    opacity: 0; 
    z-index: 2; 
    background-color: rgba(0, 0, 0, 0.4); 
    transition-property: opacity; 
    transition-duration: 500ms; 
    transition-delay: 500ms; 
    transition-timing-function: ease-in-out; } 

.toggle:checked ~ .overlay { 
    width: 100%; 
    height: 100%; 
    opacity: 1; 
    z-index: 2; 
    transition-property: opacity; 
    transition-duration: 500ms; 
    transition-delay: 200ms; 
    transition-timing-function: ease-in-out; } 

.toggle:not(:checked) ~ .overlay { 
    transition-property: opacity; 
    transition-duration: 500ms; 
    transition-delay: 500ms; 
    transition-timing-function: ease-in-out; } 

http://codepen.io/anon/pen/reYQQN