Bunu, ekranı kullanarak - istediğiniz şekilde doğal bir şekilde çalıştırabilirsiniz, ancak Javascript kullanarak veya başkalarının bir etiketi içinde başka bir etiketi olan süslü bir numara önerdiği gibi, tarayıcıyı çalıştırmanız gerekir. CSS ve boyutları daha da karmaşıklaştırdığı için iç etiketi umursamıyorum, işte Javascript çözümü:
https://jsfiddle.net/b9chris/hweyecu4/17/
Gibi bir kutu ile başlayarak:
<div id="box" class="hidden">Lorem</div>
Gizli bir kutu.
div.hidden {
display: none;
}
#box {
transition: opacity 1s;
}
İlgili q / a'da bulunan bir hileyi kullanacağız, ofseti kontrol ederek tarayıcıyı anında kısmak için:
https://stackoverflow.com/a/16575811/176877
İlk olarak, yukarıdaki numarayı resmileştiren bir kütüphane:
$.fn.noTrnsn = function () {
return this.each(function (i, tag) {
tag.style.transition = 'none';
});
};
$.fn.resumeTrnsn = function () {
return this.each(function (i, tag) {
tag.offsetHeight;
tag.style.transition = null;
});
};
Daha sonra, bir kutuyu ortaya çıkarmak için kullanacağız ve solmaya başlayacağız:
$('#button').on('click', function() {
var tag = $('#box');
if (tag.hasClass('hidden'))
tag.noTrnsn().removeClass('hidden')
.css({ opacity: 0 })
.resumeTrnsn().css({ opacity: 1 });
else
tag.css({ opacity: 0 });
});
Bu kutuyu içeri ve dışarı kaybolur. Yani, .noTrnsn()geçişler kapalı dönüşler, o zaman kaldırmak hiddençevirir sınıf, displaygelen none, varsayılan değere block. Daha sonra solmaya hazırlanmak için opaklığı 0'a ayarladık. Şimdi sahneyi ayarladığımıza göre geçişleri tekrar açıyoruz .resumeTrnsn(). Ve son olarak, opaklığı 1 olarak ayarlayarak geçişe başlayın.
Kütüphane olmasaydı, hem görüntüleme değişikliği hem de opaklık değişikliği bize istenmeyen sonuçlar getirirdi. Sadece kütüphane çağrılarını kaldırsaydık, hiç geçiş olmazdı.
Yukarıdaki, fadeout animasyonunun sonunda görüntüyü bir daha ayarlamaz. Ancak meraklısı alabilirsiniz. Bunu, 0'dan solup yükselen biriyle yapalım.
Fantezi!
https://jsfiddle.net/b9chris/hweyecu4/22/
#box {
transition: height 1s, opacity 1s;
}
Şimdi hem yüksekliği hem de opaklığı değiştiriyoruz. Yüksekliği ayarlamadığımızı unutmayın, yani varsayılan değerdir auto. Geleneksel olarak bu geçiş yapılamaz - otomatikten piksel değerine (0 gibi) geçmek size geçiş yapmaz. Kütüphane ve bir kütüphane yöntemi ile bunun üzerinde çalışacağız:
$.fn.wait = function (time, fn) {
if (time)
this.delay(time);
if (!fn)
return this;
var _this = this;
return this.queue(function (n) {
fn.call(_this);
n();
});
};
Bu, jQuery 3.x'te hariç tutulan animasyon çerçevelerinden herhangi birine ihtiyaç duymadan jQuery'nin mevcut fx / animasyon kuyruğuna katılmamızı sağlayan bir kolaylık yöntemidir. Ben jQuery nasıl çalışır açıklamak için değil, ama söylemek yeterli, .queue()ve .stop()jQuery sağlayan sıhhi tesisat bizim animasyonlar birbirlerine adım önlemek önlemek yardımcı olur.
Aşağı kaydırma efektini canlandıralım.
$('#button').on('click', function() {
var tag = $('#box');
if (tag.hasClass('hidden')) {
// Open it
// Measure it
tag.stop().noTrnsn().removeClass('hidden').css({
opacity: 0, height: 'auto'
});
var h = tag.height();
tag.css({ height: 0 }).resumeTrnsn()
// Animate it
.css({ opacity: 1, height: h })
.wait(1000, function() {
tag.css({ height: 'auto' });
});
} else {
// Close it
// Measure it
var h = tag.noTrnsn().height();
tag.stop().css({ height: h })
.resumeTrnsn()
// Animate it
.css({ opacity: 0, height: 0 })
.wait(1000, function() {
tag.addClass('hidden');
});
}
});
Bu kod #box, sınıfını kontrol ederek ve şu anda gizli olup olmadığını kontrol ederek başlar . Ancak , gerçekte gizli olup olmadığını bulmayı beklediğiniz kayar / solmaya animasyonun sonuna sınıfı wait()ekleyerek kütüphane çağrısını kullanarak daha fazlasını başarır hidden- yukarıdaki basit örneğin yapamadığı bir şey. Gizli sınıf hiçbir zaman geri yüklenmediği için bu, öğenin tekrar tekrar görüntülenmesini / gizlenmesini sağlar.
Ayrıca, CSS ve sınıf değişikliklerinin .noTrnsn()genellikle #boxçağrılmadan önce, kullanıcıya göstermeden son yüksekliğinin ne olacağını ölçmek .resumeTrnsn()ve tam setten canlandırmak gibi ölçümler de dahil olmak üzere animasyonlar için sahneyi ayarlamak için çağrıldığını görebilirsiniz. hedef CSS değerlerine ulaşır.
Eski Cevap
https://jsfiddle.net/b9chris/hweyecu4/1/
Tıklama ile geçiş yapabilirsiniz:
function toggleTransition() {
var el = $("div.box1");
if (el.length) {
el[0].className = "box";
el.stop().css({maxWidth: 10000}).animate({maxWidth: 10001}, 2000, function() {
el[0].className = "box hidden";
});
} else {
el = $("div.box");
el[0].className = "box";
el.stop().css({maxWidth: 10001}).animate({maxWidth: 10000}, 50, function() {
el[0].className = "box box1";
});
}
return el;
}
someTag.click(toggleTransition);
CSS tahmin edeceğiniz şeydir:
.hidden {
display: none;
}
.box {
width: 100px;
height: 100px;
background-color: blue;
color: yellow;
font-size: 18px;
left: 20px;
top: 20px;
position: absolute;
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transform: scale(.2);
transform: scale(.2);
-webkit-transition: transform 2s;
transition: transform 2s;
}
.box1{
-webkit-transform: scale(1);
transform: scale(1);
}
Anahtar, display özelliğini kısıtlıyor. Gizli sınıfı kaldırarak 50 ms bekledikten sonra , eklenen sınıf yoluyla geçişe başlayarak, herhangi bir animasyon olmadan ekrana bipleme yapmak yerine, görünmesini ve ardından istediğimiz gibi genişlemesini sağlıyoruz. Gizli uygulamadan önce animasyon bitene kadar beklememiz dışında benzer şekilde gerçekleşir.
Not: Yarış koşullarından .animate(maxWidth)kaçınmak için burada kötüye kullanıyorum setTimeout. setTimeoutsiz veya bir başkası farkında olmadan kodu aldığında gizli hataları hızlıca sunar. .animate()ile kolayca öldürülebilir .stop(). Ben sadece bulmak / bunun üzerine inşa diğer kodlayıcılar tarafından çözmek kolay standart fx kuyruğuna 50 ms veya 2000 ms gecikme koymak için kullanıyorum.