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

  • ELawshea

    ELawshea

    26 Mayıs 2008
  • Friday Night Cranks

    Friday Night

    27 Mayıs 2007
  • Samantha Crain

    Samantha Cra

    30 EKİM 2008