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

  • jkimisyellow...ish

    jkimisyellow

    8 Temmuz 2009
  • L33TNoonProductions

    L33TNoonProd

    24 EYLÜL 2010
  • Tom Megalis

    Tom Megalis

    18 NİSAN 2006