SORU
6 EKİM 2011, PERŞEMBE


Twitter Bootstrap uyarıları da dışarı fade olabilir?

Ben ilk Önyükleme uyarıları görünce kalıcı pencere gibi davranır, aşağı bırakarak ya da soluyor, ve sonra kapalı olduğunda dışarı solma düşündüm. Ama her zaman görünür gibi görünüyor. Onları benim app bir katman üzerine oturmak ve onları gösteren halledebilirim sanırım ama eğer işlevselliği inşa edildi acaba?

teşekkürler!

Düzenleme, şimdiye kadar neler var:

<div id="saveAlert" class="alert-message success fade in" data-alert="alert" style="top:0">
  <a class="close" href="#">×</a>
  <p><strong>Well done!</strong> You successfully read this alert message.</p>
</div>

CEVAP
6 Kasım 2012, Salı


Kesinlikle en cevapları daha önce de belirttiğim katılmıyorum.

Kısa cevap:

"Sınıf ve jQuery fade için kullanıyor. Ekle kitaplara

3 saniye http://jsfiddle.net/QAz2U/3/ sonra uyarı kaybolur bir örnek için bu jsfiddle bakın

Uzun cevap:

Doğru olmakla birlikte bootstrap uyarıları soluyor en cevaplar jQuery Javascript (fade) eleman hareketlendirmek için kullandığı işlevi, fade kullanmak doğal destek yukarıdaki gelmez. Bu büyük avantajı tarayıcı uyumluluğu çapraz. Dezavantajı ise performans (jQuery to call CSS3 fade animation?).

Boostrap şekilde daha hızlı CSS3 geçişleri kullanır. Mobil aygıtlar için önemli olan

Bot uyarısı solmaya CSS:

.fade {
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
  -moz-transition: opacity 0.15s linear;
  -o-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}
.fade.in {
  opacity: 1;
}

Neden bu performans çok önemli olduğunu düşünüyorum? İnsanlar eski tarayıcılar ve donanım kullanarak potansiyel bir WordPress kullanmak dalgalı bir geçişler alacak.() gider. Aynı modern tarayıcılar ile eski donanım için de geçerli. CSS3 geçişleri kullanarak insanları kullanarak modern tarayıcılar bir pürüzsüz animasyon bile eski donanım ve insanları kullanarak eski tarayıcılar bu yok destek CSS geçişler sadece anında görmek elemanı pop, bence daha iyi bir kullanıcı expirience daha dalgalı animasyonlar.

Burada yukarıdaki gibi aynı cevabı aramaya geldim: bootstrap uyarı. belirme Bootstrap Kodu ve CSS bazı kazma sonra cevabı oldukça basittir. Eklenti Yok "" uyarınız için sınıf. Ve uyarı azaltmak için bu kullanarak bir WordPress kullanmak ekleyin.

(Fark YOK . HTML ^em>sınıf!)

<div id="myAlert" class="alert success fade" data-alert="alert">
  <!-- rest of alert code goes here -->
</div>

Javascript:

function showAlert(){
  $("#myAlert").addClass("in")
}

İşlev ekler yukarıdaki işlev çağırma "" uyarı CSS3 geçişleri kullanarak sınıf ve kaybolur :-)

Ayrıca bakın bu bir örnek, bir zaman aşımı (teşekkürler, John Lehmann!) kullanmak için jsfiddle: http://jsfiddle.net/QAz2U/3/

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

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Felice Musique

    Felice Musiq

    22 NİSAN 2014
  • HSmasteryoda .

    HSmasteryoda

    22 Ocak 2010
  • Moodle

    Moodle

    11 Mayıs 2010