27 AĞUSTOS 2014, ÇARŞAMBA

Css Deneyler #5 - Css Akordeon

Bu kan testleri ve bugün vermeyecek kadar hey whats size yeni bir CSS gösterilmediğini Deney yaptığımız için gidiyoruz biliyorum işlevselliği alıyor normalde aşağı bir jQuery slayt olsun ve yapacağız sadece CSS kullanarak animasyon aşağı o slayt gerçekleştirerek olacaksın şimdi yapacağız sadece bir geçiş ile bunu konum ve 10 dk Mac devletleri nefret ve başlıklar için bu yüzden şimdi bunu göstermek için gidiyoruz izlemeye devam ne yani biz burada son vardı gibi kurulmuş bir temel başlangıç ​​sayfası video en biz gerçekten sadece bir başlık var gerçekten hızlı HTML bir göz atalım Bir H tek biz bir H

ile iki bir isim var üstünde ve daha sonra bir paragraf biz NH4 dahaki O akordeon tetiği ve klasik akordiyon için bir paragraf diyor tamam şimdi biz ne yapmak istediğinizi bu var edebilmek olduğunu bunu tıklad

ığınızda akordeon tetik ama biz istedik Bu fıkra vizyonda olup olmadığını başlık artık doğru değil Biz aslında şimdi vizyonda veya olacak bir kullanarak yapıyor görebilirsiniz üzerinde geçiş akordeon paragraf an

“Burada nasıl animasyonu kontrol etmek için sadece CSS ile bir aşağı slayt veya slayt toggle oluşturmak için göstereceğim. Ekstra özellikler için Pro Up Düzeyine ...”
LevelUpTuts

cak CSS ile bu geçiş halindeki yüksekliğini fark edebilirsiniz sadece çalışmıyor iyi liderlere bir çözüm biz geçiş olabilir bir çağrı bakmak Şimdi max yükseklik taşma kombinasyonu: gizlenmiş Sekiz sonraki geçiş biz gösterebilir ve bir geçiş bu üs gizlemek biz geçmişte yaptığım gibi şimdi biz sadece jQuery ile sınıf arasında geçiş yapmak için gidiyoruz ama biz gerçek animasyon için jQuery kullanarak olacak değiliz sows devam edin ve kişinin istiyorum yapmak değiştirici

Css Deneyler #5 - Css Akordeon Resim 1 Css Deneyler #5 - Css Akordeon Resim 2 Css Deneyler #5 - Css Akordeon Resim 3 Css Deneyler #5 - Css Akordeon Resim 4

CSS oluşturmak olduğunu ve açık durum ve şimdi açık devlet olacak biz bir başlık danse var bir kere en bizim CSS önde gidelim ne olmaz akılda tutmak I sas kullanarak değilim: Burada Bir öylece CSS gibi bu tutmak ama biz yapıyorum ve akordeon sınıf A olduğunda Babam biz bazı şeyler vardır emin olmak için gidiyoruz, sonra açın Bunlardan biri biz sahip olduğundan emin olmak için gidiyoruz Ben bu yemek yapmak gibiyim kadar 20 piksel kadar başlık şimdi bu gibi görünüyor ama sonra ikinci bir saat animasyon içine alırsınız

maksimum yükseklik ve olmasıdır Mac o olmak zorunda söylüyorlar ne olursa olsun maksimum yükseklik bu olabilir Bu da açacak ama ne kadar yüksek elinden oluyor değil ne kadar yüksek ne kadar yüksek olduğu için açık Biz aşağı burada Smush ve mobil olarak diyelim yani eğer bu neye benzediğini olduğunu Bu görebiliyorum ben Marta makul yükseklik paragraf oldukça yüksek olacak Olması en bu 320 gibi piksel yüksek yarık tarama görünüyor bakalım olacak varlık maksimum yükseklik ya da 400 piksel gibi bir şey Ben bu aşamada dediğim gibi yani o olacaktı değil 400 piksel Tolliver ama max haiti Ben sadece olduğunu bunu yapmak için gitmiyor olacak o üst alma imkanı vardır demek bu yüzden önde gidelim ve maksimum yükseklik kadar söylemek Açık devletin bekleyen 20 & IMAX yüksekliğe sahip, böylece 400 piksel tamam Şimdi 400 piksel kadar en bazı şeyler ekleyelim Gördüğümüz böylece olmayan açık duruma o şimdi kapalı iken nasıl görünmesi gerektiği biz bir sorun olacak, ancak yirmi kadar başlığı ve bir gösteren ikinci Burada yapmamız gereken yine maksimum yükseklikte bulunuyor ve biz devam etti ve maksimum yükseklik 0 Çünkü akordeon normal devlet o olacak o zaman Gelecek 70 yani kapalı değişikliklerin bir sürü görmüyorum taşma isabet biz gelecek yapmanız gereken tek şey Şimdi taşma içinde: Gördüğünüz gizli aslında içerik kadar kesim var ve Sadece boyutlandırma değil Arka plan ama biz de fark o gelecek 80 dedi olsa bile onun hala Sizin olsaydı bazı yüksekliğe sahiptir Eğer 40 piksel olduğunu fark onların Hideout kontrol 1x8 dikkate almaz bu yüzden yaşıyor biz 20 piksel Burada başlık aslında kazandı istediğimiz olduğunu Bu onun yakın durumdayken istediğimiz Üst ve alt başlığı gitmiş ama biz sol ve sağ dolgu bunu istiyorum var olmak bu yüzden bu yüzden biz devlet artık konum tamam 0,20 $ kaydedebilirsiniz Yakından Koreli orada artık gelmiştir var Görünür Ancak gördüğünüz biz olsa HTML içine geliyorsa ve burada bir sınıfı bir açık eklemek o go ahead ve bu sınıf bir açık silme diyor geri oluyor Bizim CSS geri geldi gitti K ve biz bir geçiş olacak bizim CSS eklemek için bir daha az şey var şimdi bu geçiş biz olmak var istiyorum Bu doldurma olmak istiyorum, çünkü her şeyi maksimum nefret olmak istiyorum ve hatta tüm söylüyorlar gibi kadar saniye içinde diğer bazı şeyler olabilir ve sonra işaretçi puanınızı üzerinde ne olacak saniye kullanabilir ve daha sonra biraz daha yumuşak hale getirmek için bir AB'nin Sadece durulama ve şimdi en önde ve kalp geçiş de gidelim yani başka bir videoda biz nasıl küçük bir jQuery toggle eklemek için göstereceğim en go ahead ve bizim CSS gerçekten hızlı ya da bir şey ekleyelim üzerine aslında HTML gerçekten oldukça yapacağız sınıf A gerekecek az her biri için akordiyon geçiş Bu yaşı sadece ben sadece biz şimdi bu hedefleyebilir ediyorum çünkü böyle jQuery ile Kaptanlar taahhüt veya jQuery ve gibi bizden önce dolar işareti Seas ve ardından tırnak yazdırmak gördüm ve sonra biz bir geçiş akordeon hitman geçiş akordeon nokta yok ne yapar o şimdi çalıştıklarını söyledi akordeon yakalar olduğunu akordeon ile ve bir yöntemini hafifletilmesi ve Bunun üzerine alır Birinci parametre bir dize içinde tıklamak Virgül bir işlev yüzden tipi sonra ikinci parametre alır Aslında var işlevi burada kod biraz daha fazla yer almak Bir biz işlevi sonra Seas yazdırmak bantlanmış noktalı virgül kadar bitmiş parantez duyuyorum Bir bar fonksiyonunda tamam sessizlik biz tıklayın ne olur Bu denildi olan şey olur, sadece tıklayın ve ne olur bir Koreli taco olmak şimdi biz sadece dolar işareti yaparak akordeon bulmalıyız Daha sonra parantez tırnak ve dönem için sadece böyle akordeon ve biz o başlık sınıfı nefret yapabilirsiniz ve daha sonra tırnak içinde sereceğim sınıf burada var titling olmak gibi pek açık biz aslında jQuery ile animasyon yapmıyoruz dedi biz bir şey presentational bunun için jQuery güvenmek zorunda değilsiniz güzel çünkü sadece bir sınıf dönüm kızımız biz jQuery en biz istedik diyelim olduğunu kullanmak vermedi eğer onur Normal JavaScript bunu yazmak ya da biz kullanmak istiyorum açısal bir şey gibi başka teknoloji sınıfı devirmek olabilir bu teknolojileri ile bu animasyon hala işe tamam bu yüzden şimdi Şimdi bu deneyin alalım bu kaydettiğiniz ve hiçbir Nick Wiger akordeon tetik İçerik yarasa gibi mükemmel aşağı yukarı kayar ve o görebilirsiniz Eğer biraz ekstra güzel eklemek istiyorsanız müthiş çağrı ve biz aslında vermek olduğunu neler yapabileceğini bu yetenek biz demek olsaydı bu yüzden ses donukluk değiştirmek akordeon donukluk 0 o zaman kapalı ve ne zaman biz El Paso de verilen açıldığında tek ve biz geçiş ve her şeyi var çünkü biz şimdi kontrol ederken içeri güzel küçük kaybolma ve gerçek içeriğini almak ve bunu bir güzel küçük etkisi olduğunu sorta ne gibi geliyor görebilirsiniz denilen ve o donukluk gibi biliyorum ve eğer sadece standart stil olmak istiyorum akordeon Her zaman sadece burada donukluk değişiklikleri kaldırmak olabilir Bu bu kadar ilgili bu yüzden şimdi bir akordeon tetikleyici var ve gerçekten serin Tamamen esnek Biz her yerde biz dekor arıyor cuz istiyorum bu tetikleyici olabilir arıyor tetikleyebilir ne olursa olsun, istediğiniz kadar bu kalabilirler paragraf bunu görünmesini sağlayabilirsiniz Böyle bir çekmece gibi bir şey ya da sadece o basit olabilir Hayır bu içeriği açılır tetik Bu yüzden bir slayt durumlu veya akordeon yapmak nasıl check it out bölgeler böylece animasyon için CSS kullanarak eylem çok sahip gidin Herhangi bir sorunuz veya yorumunuz varsa yolla bir kafaları aşağıdaki videoyu bırakın Twitter, Facebook ve doğru yukarı düzeye kadar bu Chuck Teds nokta com seviyede olduğunu biliyoruz ve diğer seviyesini kontrol Pro dokundu seviyesi up abonelik hizmeti hangi böylece videoları indirebilirsiniz aşk pro için kod örneklerini olabilir CSS deneyler ve hatta geri katalog yapıyor sırasında gidiyoruz emin olmak için bu kod örnekler var özel form bir reklam yapabilirsiniz var ücretsiz deneyim ve seviye yukarı acecomm dokundu diyor benzer bir iki saatlik diyor ustalık kursu bile var Ben var videoları dokunmatik seviyorum ama hiçbir dokunma artı pazarı için özel yapıldı Artık şimdi bir parçası olarak size getirmek mümkün değilim bu yüzden var seviye yukarı Pro paket öylesine kaydolmak 8,99 $ bir ay veya doksan beş dolar bir yıl ve sadece dışarı düzeyde bir profesyonel için yardım desteği seviye yukarı kontrol izliyor ve biz sonraki biri görürsünüz için teşekkürler.

Açıklama

Burada nasıl animasyonu kontrol etmek için sadece CSS ile bir aşağı slayt veya slayt toggle oluşturmak için göstereceğim. Ekstra özellikler için Pro Up Düzeyine abone olun! http://leveluptuts.com/level-up-pro Level Up Haber Bülteni Abone http://eepurl.com/AWjGz Sorularınız için yorumlar veya ziyaret sonrası: http://leveluptuts.com/forum Level Up Tuts Destek: http://leveluptuts.com/donations

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

LevelUpTuts

LevelUpTuts

Ön uç web geliştiricileri için Öğreticiler. Level Up Tuts web geliştirme ve diğer medya uygulamaları ücretsiz öğreticiler sağlamanın bir yolu olarak Scott Tolinski ve Ben Schaaf tarafından başlatıldı. Biz bir medya yaratıcısı olarak büyüme bizim bilgi yararlı bulacağını umuyorum. Biz tam zamanlı (ve freelance) geliştiriciler Çünkü, Level Up Tuts sana getirmek için biz çalışıyoruz, bir yandan projesidir. Eğer öğrendiklerini hoşlanıyorsanız bu yüzden yeni dersler yapmaya devam edebilirsiniz bağış yapmak için çekinmeyin. Level Up Tuts bu hızlı anketi doldurarak geliştirmemize yardımcı olun https://docs.google.com/forms/d/1x7MTNp_umnvdkwJ5dfOVnnJtndkYdU7EDoCE9r8bYBk/viewform

YORUMLAR



9.8/10

  • 62
    Olumlu
  • 1
    Olumsuz
  • 10
    Yorum
  • 5377
    Gösterim

SPONSOR VİDEO

Rastgele Yazarlar

  • Brendan van Son

    Brendan van

    5 Aralık 2006
  • Bryan Smith

    Bryan Smith

    12 Mart 2006
  • L- Crysis

    L- Crysis

    30 Aralık 2011

ANKET



Bu sayfa işinize yaradı mı?