SORU
21 ŞUBAT 2011, PAZARTESİ


CSS3 jQuery slideUp ve slideDown eşdeğer?

Benim uygulama kötü jQuery slideDown ve slideUp ile gerçekleştiriyor. Bunu destekleyen tarayıcılarda CSS3 eşdeğer kullanmak için arıyorum.

Aşağı ya da yukarı öğesini kaydırarak Olası, CSS3 geçişleri kullanarak, display: block; display: none; bir elemanı değiştirmek için mi?

CEVAP
21 ŞUBAT 2011, PAZARTESİ


Böyle bir şey yapabilirsin:

#youritem .fade.in {
    -webkit-animation-name: fadeIn;
}

#youritem .fade.out {
    -webkit-animation-name: fadeOut;
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
        -webkit-transform: translateY(startYposition);
    } 
    100% {
        opacity: 1;
        -webkit-transform: translateY(endYposition);
    }
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
        -webkit-transform: translateY(startYposition);
    } 
    100% {
        opacity: 0;
        -webkit-transform: translateY(endYposition);
    }
}

Örnek Slayt ve Solmaya:

Bu Dodge konteyner yüksekliği dayalı slaytlar canlandırır, ama üst/koordinat. View example

Örnek - Otomatik yükseklik Hiçbir Javascript/:İşte canlı bir örnek, gerek yükseklik - otomatik yükseklik ile ilgili hiçbir javascript.
View example

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • dcigs

    dcigs

    9 EYLÜL 2006
  • Jana Williams

    Jana William

    17 AĞUSTOS 2011
  • Yanko Kral

    Yanko Kral

    8 HAZİRAN 2006