Boyut ve çeviri geçişlerini birleştirmek, Safari'de

Question

'da yığılmalara neden olur Bir öğeye geçişler eklerken ve genişliği ve/veya yüksekliği ve -webkit-dönüşünü değiştirirken: translate3d, geçiş animasyonu kesilir. İlk önce genişlik/yükseklik değişimini canlandırır, kısmen çevirir ve son çevrilmiş konuma geçer. Ancak orijinal stile dönerken, animasyon düzgün. Bunu sadece Safari'de görüyorum (test edilen 8.0.6 sürümü). İşte bazı örnek css

#foo{ 
    width:100%; 
    height:200px; 
    border:1px solid black; 
    position:relative; 
} 

#poop{ 
    width:25px; 
    height:25px; 
    background-color:green; 
    position:absolute; 
    right:50%; 
    top:50%; 
    -webkit-transition: all 1s; 
    transform:translate3d(0,0,0); 
    -webkit-transform:translate3d(0,0,0); 
} 

#foo .blah{ 
    transform:translate3d(-100%,-100%,0); 
    -webkit-transform:translate3d(-100%,-100%,0); 
    width:100px; 
    height:100px; } 

Ve gösteri uğruna bir düğme tıklandığında elemana bir sınıf eklemek için jquery kullanıyorum bir jsfiddle http://jsfiddle.net/84w4hj99/4/

, ama kullanırken ilk fark: fare ile üzerine gelerek aynı etkiyi elde et. Burada bir şeyi mi özlüyorum yoksa sadece Safari ile ilgili bir sorun mu var ve herkes bir çözüm buluyor mu? Teşekkürler.

Answer 1

Genişlik ve yükseklik değiştirmek yerine transform: scale() kullanmayı deneyin. Bu durumda pürüzsüz bir geçiş yapacaksınız. Ancak, nesneyi doğru konuma getirmek için top & right veya transform: translate3D() özelliklerini ayarlamanız gerekecektir. Kolay olmalı.

Bkz. http://jsfiddle.net/y3xqak1z/