คุณสามารถทำให้เรื่องนี้เป็นไปอย่างเป็นธรรมชาติตามที่คุณคาดหวังโดยใช้จอแสดงผล แต่คุณต้องเร่งเบราว์เซอร์ให้ทำงานโดยใช้ Javascript หรือตามที่คนอื่น ๆ แนะนำให้ใช้กับแท็กหนึ่ง ฉันไม่สนใจแท็กด้านในเนื่องจากจะทำให้ CSS และขนาดมีความซับซ้อนมากขึ้นดังนั้นนี่คือโซลูชัน Javascript:
https://jsfiddle.net/b9chris/hweyecu4/17/
เริ่มต้นด้วยกล่องเช่น:
<div id="box" class="hidden">Lorem</div>
กล่องที่ซ่อนอยู่
div.hidden {
display: none;
}
#box {
transition: opacity 1s;
}
เราจะใช้เคล็ดลับที่พบใน q / a ที่เกี่ยวข้องตรวจสอบ offsetHeight เพื่อเค้นเบราว์เซอร์ทันที:
https://stackoverflow.com/a/16575811/176877
ขั้นแรกให้ไลบรารีทำเคล็ดลับข้างต้นให้เป็นระเบียบ:
$.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;
});
};
ต่อไปเราจะใช้มันเพื่อเปิดเผยกล่องและจางหายไปใน:
$('#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 });
});
จางกล่องนี้เข้าและออก ดังนั้น.noTrnsn()จะปิดการเปลี่ยนแล้วเราเอาhiddenชั้นซึ่งพลิกdisplayจากการเริ่มต้นของnone blockจากนั้นเราตั้งค่าความทึบเป็น 0 เพื่อเตรียมพร้อมสำหรับการซีดจางในตอนนี้เมื่อเราตั้งค่าสเตจ.resumeTrnsn()แล้ว และสุดท้ายเปลี่ยนการตั้งค่าความทึบเป็น 1
หากไม่มีห้องสมุดทั้งการเปลี่ยนแปลงที่จะแสดงและการเปลี่ยนแปลงความทึบจะทำให้เราได้ผลลัพธ์ที่ไม่พึงประสงค์ หากเราเพียงแค่ลบการเรียกห้องสมุดเราจะไม่ได้รับการเปลี่ยนเลย
โปรดทราบว่าข้างต้นไม่ได้ตั้งค่าการแสดงผลเป็นไม่มีอีกต่อไปในตอนท้ายของภาพเคลื่อนไหว fadeout เราสามารถหาได้มากกว่า ลองทำกับสิ่งที่จางหายไปและเพิ่มความสูงจาก 0
แฟนซี!
https://jsfiddle.net/b9chris/hweyecu4/22/
#box {
transition: height 1s, opacity 1s;
}
ตอนนี้เรากำลังเปลี่ยนทั้งความสูงและความทึบ autoโปรดทราบว่าเราไม่ได้ตั้งค่าความสูงซึ่งหมายความว่ามันเป็นค่าเริ่มต้น โดยทั่วไปการเปลี่ยนแปลงนี้ไม่สามารถทำได้ - การย้ายจากอัตโนมัติไปเป็นค่าพิกเซล (เช่น 0) จะทำให้คุณไม่มีการเปลี่ยนแปลง เราจะแก้ไขสิ่งนั้นด้วยห้องสมุดและวิธีห้องสมุดอีกหนึ่งวิธี:
$.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();
});
};
นี่เป็นวิธีการอำนวยความสะดวกที่ให้เรามีส่วนร่วมในคิว fx / แอนิเมชันที่มีอยู่ของ jQuery โดยไม่จำเป็นต้องใช้เฟรมเวิร์กแอนิเมชันใด ๆ ที่ตอนนี้ถูกแยกออกใน jQuery 3.x ฉันจะไม่อธิบายว่า jQuery ทำงานอย่างไร แต่พอเพียงที่จะพูด.queue()และการ.stop()ประปาที่ jQuery ช่วยให้เราสามารถป้องกันไม่ให้แอนิเมชั่นของเราเหยียบกัน
ลองทำเอฟเฟกต์สไลด์ลง
$('#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');
});
}
});
รหัสนี้เริ่มต้นด้วยการตรวจสอบ#boxและไม่ว่าจะเป็นที่ซ่อนอยู่ในปัจจุบันโดยการตรวจสอบในชั้นเรียน แต่จะประสบความสำเร็จมากขึ้นโดยใช้การwait()เรียกไลบรารี่โดยการเพิ่มhiddenไลบรารี่คลาสที่ส่วนท้ายของแอนิเมชั่น slideout / fade ซึ่งคุณคาดว่าจะพบว่ามันถูกซ่อนอยู่หรือไม่ - ตัวอย่างที่ง่ายกว่าไม่สามารถทำได้ สิ่งนี้เกิดขึ้นเมื่อเปิดใช้งานการแสดง / การซ่อนอิลิเมนต์ซ้ำไปซ้ำมาซึ่งเป็นข้อบกพร่องในตัวอย่างก่อนหน้านี้เนื่องจากคลาสที่ซ่อนไม่เคยถูกเรียกคืน
คุณยังสามารถเห็นการเปลี่ยนแปลง CSS และคลาสที่ถูกเรียกใช้หลังจาก.noTrnsn()ตั้งค่าทั่วไปสำหรับภาพเคลื่อนไหวรวมถึงการวัดเช่นการวัดสิ่งที่จะเป็นความสูงสุดท้าย#boxโดยไม่แสดงให้ผู้ใช้เห็นก่อนการโทร.resumeTrnsn()ออกและสร้างภาพเคลื่อนไหวจากชุดเต็ม สเตจไปยังค่า CSS เป้าหมาย
คำตอบเก่า
https://jsfiddle.net/b9chris/hweyecu4/1/
คุณสามารถเปลี่ยนมันเมื่อคลิกด้วย:
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 คือสิ่งที่คุณคาดเดา:
.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);
}
คีย์กำลังควบคุมคุณสมบัติการแสดงผล ด้วยการลบคลาสที่ซ่อนอยู่จากนั้นรอ 50 ms จากนั้นเริ่มต้นการเปลี่ยนผ่านคลาสที่เพิ่มเข้ามาเราจะปรากฏให้มันปรากฏขึ้นและขยายออกไปตามที่เราต้องการแทนที่จะเป็นเพียงแค่กระโดดบนหน้าจอโดยไม่มีภาพเคลื่อนไหวใด ๆ สิ่งที่คล้ายกันเกิดขึ้นในอีกทางหนึ่งยกเว้นเราจะรอจนกว่าภาพเคลื่อนไหวจะจบก่อนที่จะปิดบัง
หมายเหตุ: ฉันกำลังดูถูกเหยียดหยาม.animate(maxWidth)ที่นี่เพื่อหลีกเลี่ยงsetTimeoutสภาพการแข่งขัน setTimeoutเป็นวิธีที่รวดเร็วในการแนะนำข้อบกพร่องที่ซ่อนอยู่เมื่อคุณหรือคนอื่นหยิบรหัสโดยไม่รู้ตัว สามารถฆ่าได้อย่างง่ายดายด้วย.animate() .stop()ฉันแค่ใช้มันเพื่อทำให้การหน่วงเวลา 50 ms หรือ 2000 ms บนคิว fx มาตรฐานซึ่งง่ายต่อการค้นหา / แก้ไขโดยตัวแปลงสัญญาณอื่น ๆ ที่สร้างขึ้นจากด้านบนนี้