Tekrar hoşgeldiniz.
Bu yüzden Jay kraliçesini başlangıçta tanıttığımızda, select öğeleri olay dinleyicileri üzerinde manipüle etmek
gibi şeyleri yapmamıza yardımcı olduğunu belirtti.
Ayrıca efektler ve animasyonlar için yardımcı olduğunu belirtti.
Bu yüzden bu videoda bazı efektler üzerine hızlı bir önizleme
yapacağım, özellikle efektleri ve slaytları solan etkilerin iki geniş kategorisini göstereceğim.
Bu yüzden efekt kategorisinde Jay Corey rıhtımında bulunuyorum.
solmaya efektler göstererek başlayacağım, bu yüzden başlamak için solmaya bakacağım.
Efektlerle ilgisi olan epeyce yöntemin olduğunu görebilirsiniz ve
Ne fadeout yaparsınız, bir dolar işareti veya bir dizi öğe içeren bir öğeyi seçersiniz
ve bu öğeyi fade out olarak adlandırırsanız ve bu öğenin tam opaklıktan tam şeffaflığa veya sıfır opaklığa kadar
canlandırdığı anlamına gelir.
Bu nedenle temelde bir öğeyi yok eder ve yavaş ya da hızlı ya da çok yavaş olmasını isterseniz
bir süre sağlayabilirsiniz.
Birkaç milisaniye sağlayabilirsiniz.
400 milisaniyedir ve sonunda yalnızca bir dakika içinde gösterileceğim bir geri arama sağlayabilirsiniz.
Varsayılan değer
Bu yüzden, bu etki çalışma demosunu göstermek için yeni bir dosya hazırlayacağım ve son demo
sayfasından yapımımızı kopyalayacağım ve bu projede J Querrey efektleri kullanılacaktır.
Bu yüzden kurulumu yaptık ve burada bu içeriğin hepsinden kurtulacağım
ve sonra birkaç div'a ekleyeceğim.
Haydi üç divs yapalım ve bu div'leri kullanacağız ve onları sarmalayıp animasyon haline getireceğiz ve
yukarıdan aşağıya kaydıracağız.
onlara bu filmin içeriğinde bazı şeyler vereceğim, bunlar gelecek olanı silecek değil.
Ve ben de
Sana yalvarıyorum lütfen.
Ve son olarak, Yardımı yardım etmesini söyleyen bir yardım alacağız.
Bu div'ler solup gitmemek için çaresizdir.
Maalesef bugün ne şanslı günleri değil.
Ve onlarla savaşacağız.
Bu yüzden daha net hale getirmek için hayatımıza biraz stil katacağım, böylece
renklerinin solup gidebileceğini göreceksiniz.
Ve ayrıca, yukarı ve aşağı kaydıracak bir genişlik ve yüksekliğe sahipler.
Bu yüzden tüm div'leri seçip 100 piksellik ve 100 piksel yüksekliğinde ve
bir renk tonlamalı renk verecek ve bunları kaydedeceğim ve bunu açacağız.
Üç div var.
Ancak onlarla aynı çizgide olmasını isterim.
Dolayısıyla bunu yapmanın bir yolu şamandıranın kalmış olmasıdır.
Şimdi hepsi aynı çizgide ama birbirlerine kan döküyorlar.
Bunu düzeltmek için bir marj ekleyebiliriz.
Dolayısıyla, her iki tarafta 20 piksel bir kenar boşluğu yapacağız.
Şimdi üç kareden oluşuyor ve her birinin içinde bir metin var ve bunları
şekillendirmeye gerçekten ihtiyaç duymuyoruz, çünkü tek yapacağımız bunların onlara nasıl sığacaklarını göstermektir.
Bu yüzden buraya bir düğme ekleyeceğiz ve bu düğme sadece beni tıklatacak.
Ve bu butona tıkladığımızda, animasyonlarımızın çalışması ne olacak.
Bu yüzden tıklayın ve bu üç öğe başlamak için solmaya gerekir.
Dolayısıyla, solmaya devam etmek yinelemek, bir unsuru tam donukluktan veya herhangi bir opaklıktan alacaktır. Şu anda
bulunduğu ve tam şeffaflık noktasına gölgelendiği anlamına gelir.
Bu yüzden, bu nokta seçilemiyor gibi görünür ve isteğe bağlı bir hız dizgisi sunabiliriz, o kadar yavaş
veya hızlı veya birkaç milisaniyelik bir süre verilebilir.
Şimdi sana göstermeme izin ver.
Aslında bunu ayrı bir dosyada yapacağım, böylece bir javascript dosyası oluşturup kaydedeceğim.
Bunu, yalnızca uyanık alarmımı bağlayan ve yanımı düzgün
şekilde birleştiren dehayı etkileyen bir sesle etkiler.
Sadece bir betik etiketi ekleyin.
Kaynak efektlerle eşittir.
Evet.
Ve eğer yenilersek bağlı alarmı alacağız.
Bu yüzden burada yapmak istediğimiz şey, bu şeylerin ortaya çıkması pahasına.
Dolayısıyla cihazı böyle seçmeliyiz ve sönmemeliyiz.
Ve sonra bir hız sağlayabilir ya da öyle bırakabiliriz.
Ve yapmak ya da yenilemek istediğimiz tek şey buysa ve sayfa yüklemesi esnasında parlamaz hale geldiğini görebilirsiniz.
O halde bunu düğmeyi tıkladığımızda gerçekleştirelim.
düğme noktası yapmak isteyeceğiz, ya tıklamayı yapabiliriz, yoksa hızlı bir şekilde nokta yazıp sonra geri arama işlevini kabul edeceğiz.
Dolayısıyla, bir dolar işareti
Bu yüzden tıkladığımızda tüm div'leri silecek ve şimdi yenilecek olacak ve tıklarsam
hepsinin kaybolduğunu görebilirsiniz.
Bahsettiğim gibi burada bir sayı verebiliriz, burada tam saniye olan 1000 gibi bir şey.
Yenilersem, tıkladığımda göreceksin, yok olacakları için tam saniye sürer.
Kaybolmama ile ilgili önemli bir nokta da, sayfayı incelersem ve öğelere baktığımda div
hala hala yurdun ekibinde olduğudur.
Onları görmüyoruz çünkü görüntüleri hiçbir şey yapılmadı.
Dolayısıyla bunları silmemekte veya sayfadan kaldırmamaktadır.
Sadece onları saklıyorlar.
Ve bu kesinlikle önemli bir ayrım.
Diyelim ki, div'ler solduktan sonra sadece bir mesaj basmak istedim, böylece onları solacaktım
ve daha sonra, günlüğünü iptal ettikçe tamamlanan solmaya benzer bir şey yaptım diyelim.
Ve ben bunu yaparsam, konsolu açıp olayların gerçekleşeceğini izleyeceğim.
Bu yüzden, buraya tıkladığım zaman, solmaya başlamadan önce Faid'i tamamladım.
Peki, burada ne olur div'ları seçtiğimizden ve solmaya başlayacağız, ancak tam bir saniye sürüyor.
Ve javascript, bir sonraki satıra geçmeden önce o saniyenin bitmesini beklemiyor.
Hemen bu satıra taşındı ve Faid tamamlandı ve sonra fade out tamamladı yazdırır.
Dolayısıyla, fade bittikten hemen sonra kodun olmasını istiyorsak, burada bir geri bildirim
gönderdikten sonra bunun olmasını garantilemek istiyoruz.
Ve bu yüzden bu geri arama bittiğinde fadeout'un içinde otomatik olarak çağrılır.
Bu yüzden sürekli günlük kaydını alıp kurtaracağım.
Yenilersem ve şimdi fade out'u tıklarsam ve o zaman her biri için 3 Fade tamamlanmış konsol
nokta günlüğünü elde ederiz.
Konsolos'ta bir dize yazdırmaktan ziyade daha yaygın bir senaryo, elemanları silip
süpürdükten sonra kaldırmaktır.
Dolayısıyla sadece gizli olduklarını, aslında gitmediğini belirttim.
Onları silmek istersek, yavaş yavaş solmamak istediğimiz bir öğenin yanındaki çöp kutusu
üzerine tıkladığımızda güzel bir animasyon yapmak için yapacağımız yapılacaklar listesi gibi.
Fakat sonra da sayfayı DOM'dan tamamen silin.
Bu nedenle, remove adlı bir yöntem kullanmamız gerekiyor ve sadece fadeout bittikten sonra onu kaldırmak istiyoruz.
Dolayısıyla bunun gibi görünen bu kaldırma işlemini yapacaktır.
Ve bu, yapacak fadeout bitene kadar bekleyecek.
Ve her div için Remove yöntemini çalıştırır.
Tazeleyin ve tıklayın bana tıklayın.
Kaybolup giderler ve öğelere giderek vücudumuzun sadece bir düğmesi olduğunu ve tüm
div'lerin tamamen tükenmiş bir etiketinin olduğunu görebilirsiniz.
Ve eğer bu satırı yorumlayıp yenileyersem burada nereden üç divs başladıklarını görebilir ve
butona tıklarsam ve hepsi olur.
Kaybolup kaybolurlar ve daha sonra hiçbiri görüntülenmez.
Kodumu yanlış yere koyarsam ve Remove yöntemini burada çalıştırsam, tüm divs dot'ları
aynen kaldırdım.
Gerçekte ne olur ki, emrin garantisi yoktur.
Ve bu tam bir saniye sürecektir.
Ve bu kod bu saniyenin bitmesini beklemiyor.
Dolayısıyla solmaya ve daha sonra hemen çıkartmaya başlayacak.
Böylece bu, solmaya ve neredeyse çıktıktan hemen sonra başlar.
Yani temelde hiçbir solmaz.
İşte bu yüzden J.
Corey, bu geri aramayı sağlar; çünkü bir şeyleri solduktan sonra veya bir şeyi
aşağı kaydırdığımızda veya animasyon ne olursa olsun bir şeyler yapmak istemek çok yaygındır.
Bu beni bir sonraki noktamıza getiriyor; bu da, yapabildiğim diğer animasyonların bir
kısmını göstermek istediğimden, bu yüzden de şeyleri solacak gibi görünüyor.
Öyleyse ekranın başında hiçbiri olmamasını sağlayacak olursam yenileyebilirim.
Div'leri görmüyoruz çünkü şimdi tıkladığımızda soluyoruz, gizli oldukları için gizliyoruz,
onlara solacak ve istediğiniz gibi çalışıyor.
Düğmeye tıklayın ve saniyeler içinde kaybolurlar ve daha sonra bazı kodları çalıştırmak istersek, solma işleminin
bittiğini bildiğimizde bazı kodları yerleştirebiliriz ve eğer geri arama olsaydı diyebiliriz.
Pekala, o da Faden.
GK, Faid toggle ve Faid toggle aynı şekilde çalışan bir daha güzel solmaya yöntem sağlar.
Birkaç milisaniyede bilgi veriyorum ve şu an gösterilip gösterilmiyorsa, içeri girip çıkacak bir
şey olup olmadığını anlayacaktır.
Yenilersem ve Fade geçiş düğmesini tıklarsam hepsini besleyerek başlar ve daha sonra hepsini
silip geri gider.
Temel olarak, sınıf listesini bir sınıf ekleyerek veya Jay Querrey ile geçiş sınıfı kullanarak
solmaya veya solmaya ihtiyaç duyup duymadığınızı kararlaştırmak gibi.
Pekâlâ, göstermek istediğim bir sonraki efekt efektinin solup kayması bu kayan etkiler.
Aşağıda, kaydırma çubuğunun aşağı kaydırılması ve kaydırılması var.
Dolayısıyla slayttan aşağıya başlayacağım ve ne yaptığı, şu anda göstermeyen bir unsurun, bir unsurun
yüksekliğini canlandırdığı Faid gibi bir unsur üzerinde opaklığı canlandırmak yerine geçmesi gerekiyor.
Bu işin nasıl yürüdüğünü size göstereceğim.
Bunu değiştireceğiz.
Soluklaşmak yerine geçiş yapacağız.
Bunun sebebi, elementlerimizi yenilediğimizde gizlidir.
Bir düğmeye tıkladığımızda slayt aşağı doğru çalıştırırsanız, yüksekliğin animasyonlu olduğunu ve aynı şeyin
slayt için gittiğini göreceksiniz.
Aksini yapar.
Peki ekran üzerinden kurtulursam gösteriyorlar.
Ve şimdi düğmeyi tıklıyorum.
Yükseklikleri hareketlidir ve yukarı doğru slaytlar ve en sonunda Yok olarak ayarlanır.
Ve diğer yöntem, yalnızca ne yapacağınıza karar verdiği Faid geçiş gibi çalışan slayt geçişidir.
Böylece tıklarsam yukarı kayarlar ve şimdi kayarak aşağıya ve yukarıya doğru kayarlar.
Dolayısıyla hepsini slayt aşağı slayt ve geçiş geçiş yapmaktır.
Tıpkı ücretli analog yöntemler gibiydiler.
Ayrıca geçebileceğimiz isteğe bağlı bir geri arama var.
Yani 1 saniyelik bir süre verdiysek aramamızı geri alabilirsem.
Ve ben sadece bir daha yapacağım. bu günlük son slayt yapılır.
Ve bu, yalnızca ikinci slayt tamamlandıktan sonra yazdırılacaktır.
Bu yüzden yenileyiyorum.
Konsola bakalım ve tıklamaya tıkladıklarında bunu yalnızca slayt bittiğinde basılmış olarak
görebilirsiniz.
Aynı şey burada dikkat ediyor.
Bu altıya değişecek.
Oraya gidiyoruz.
Ancak yine de daha yaygın olan bir kalıp, öğeleri kaydırdıktan veya silmek için öğeleri
kaldırmak veya yaptığımız şey onları kaldırmaktır.
Dolayısıyla, onları kaydırmak bir saniye alacak ve sonra sayfadan çıkarılacaktır.
Ve elemanlar sekmesine gidersek, o düğme ve senaryo dışında bedenimiz boş olur.
Umarım bir taş ocağındaki etkilerden bazılarının nasıl çalıştığına dair size iyi bir fikir verirler.
Bunlar çok yaygın soldurma ve kayma.
Ve bir sonraki video'da başlayacağımız liste uygulaması yerine bunları kullanacağız.