ต่อไปนี้เป็นวิธีการเปลี่ยนจากความสูงเริ่มต้นใด ๆ รวมถึง 0 เป็นอัตโนมัติ (ขนาดเต็มและยืดหยุ่น) โดยไม่ต้องใช้รหัสที่กำหนดค่ายากสำหรับแต่ละโหนดหรือรหัสผู้ใช้ใด ๆ เพื่อเริ่มต้น: https://github.com/csuwildcat / นี้เป็นพื้นจอกศักดิ์สิทธิ์สำหรับสิ่งที่คุณต้องการผมเชื่อว่า -> http://codepen.io/csuwldcat/pen/kwsdF เพียงตบไฟล์ JS ต่อไปนี้ในหน้าของคุณและสิ่งที่คุณต้องทำหลังจากนั้นคือการเพิ่ม / ลบแอตทริบิวต์บูลีนเดียวreveal=""- จากโหนดที่คุณต้องการขยายและทำสัญญา
นี่คือทั้งหมดที่คุณต้องทำในฐานะผู้ใช้เมื่อคุณรวมบล็อคโค้ดที่อยู่ด้านล่างโค้ดตัวอย่าง:
/*** Nothing out of the ordinary in your styles ***/
<style>
div {
height: 0;
overflow: hidden;
transition: height 1s;
}
</style>
/*** Just add and remove one attribute and transition to/from auto! ***/
<div>
I have tons of content and I am 0px in height you can't see me...
</div>
<div reveal>
I have tons of content and I am 0px in height you can't see me...
but now that you added the 'reveal' attribute,
I magically transitioned to full height!...
</div>
นี่คือบล็อคโค้ดที่จะรวมไว้ในหน้าเว็บของคุณหลังจากนั้นมันก็เป็นน้ำเกรวี่
วางไฟล์ JS นี้ในหน้าของคุณ - มันทั้งหมด Just Works ™
/ * รหัสสำหรับความสูง: อัตโนมัติ; การเปลี่ยน * /
(function(doc){
/* feature detection for browsers that report different values for scrollHeight when an element's overflow is hidden vs visible (Firefox, IE) */
var test = doc.documentElement.appendChild(doc.createElement('x-reveal-test'));
test.innerHTML = '-';
test.style.cssText = 'display: block !important; height: 0px !important; padding: 0px !important; font-size: 0px !important; border-width: 0px !important; line-height: 1px !important; overflow: hidden !important;';
var scroll = test.scrollHeight || 2;
doc.documentElement.removeChild(test);
var loading = true,
numReg = /^([0-9]*\.?[0-9]*)(.*)/,
skipFrame = function(fn){
requestAnimationFrame(function(){
requestAnimationFrame(fn);
});
},
/* 2 out of 3 uses of this function are purely to work around Chrome's catastrophically busted implementation of auto value CSS transitioning */
revealFrame = function(el, state, height){
el.setAttribute('reveal-transition', 'frame');
el.style.height = height;
skipFrame(function(){
el.setAttribute('reveal-transition', state);
el.style.height = '';
});
},
transitionend = function(e){
var node = e.target;
if (node.hasAttribute('reveal')) {
if (node.getAttribute('reveal-transition') == 'running') revealFrame(node, 'complete', '');
}
else {
node.removeAttribute('reveal-transition');
node.style.height = '';
}
},
animationstart = function(e){
var node = e.target,
name = e.animationName;
if (name == 'reveal' || name == 'unreveal') {
if (loading) return revealFrame(node, 'complete', 'auto');
var style = getComputedStyle(node),
offset = (Number(style.paddingTop.match(numReg)[1])) +
(Number(style.paddingBottom.match(numReg)[1])) +
(Number(style.borderTopWidth.match(numReg)[1])) +
(Number(style.borderBottomWidth.match(numReg)[1]));
if (name == 'reveal'){
node.setAttribute('reveal-transition', 'running');
node.style.height = node.scrollHeight - (offset / scroll) + 'px';
}
else {
if (node.getAttribute('reveal-transition') == 'running') node.style.height = '';
else revealFrame(node, 'running', node.scrollHeight - offset + 'px');
}
}
};
doc.addEventListener('animationstart', animationstart, false);
doc.addEventListener('MSAnimationStart', animationstart, false);
doc.addEventListener('webkitAnimationStart', animationstart, false);
doc.addEventListener('transitionend', transitionend, false);
doc.addEventListener('MSTransitionEnd', transitionend, false);
doc.addEventListener('webkitTransitionEnd', transitionend, false);
/*
Batshit readyState/DOMContentLoaded code to dance around Webkit/Chrome animation auto-run weirdness on initial page load.
If they fixed their code, you could just check for if(doc.readyState != 'complete') in animationstart's if(loading) check
*/
if (document.readyState == 'complete') {
skipFrame(function(){
loading = false;
});
}
else document.addEventListener('DOMContentLoaded', function(e){
skipFrame(function(){
loading = false;
});
}, false);
/* Styles that allow for 'reveal' attribute triggers */
var styles = doc.createElement('style'),
t = 'transition: none; ',
au = 'animation: reveal 0.001s; ',
ar = 'animation: unreveal 0.001s; ',
clip = ' { from { opacity: 0; } to { opacity: 1; } }',
r = 'keyframes reveal' + clip,
u = 'keyframes unreveal' + clip;
styles.textContent = '[reveal] { -ms-'+ au + '-webkit-'+ au +'-moz-'+ au + au +'}' +
'[reveal-transition="frame"] { -ms-' + t + '-webkit-' + t + '-moz-' + t + t + 'height: auto; }' +
'[reveal-transition="complete"] { height: auto; }' +
'[reveal-transition]:not([reveal]) { -webkit-'+ ar +'-moz-'+ ar + ar +'}' +
'@-ms-' + r + '@-webkit-' + r + '@-moz-' + r + r +
'@-ms-' + u +'@-webkit-' + u + '@-moz-' + u + u;
doc.querySelector('head').appendChild(styles);
})(document);
/ * รหัสสำหรับ DEMO * /
document.addEventListener('click', function(e){
if (e.target.nodeName == 'BUTTON') {
var next = e.target.nextElementSibling;
next.hasAttribute('reveal') ? next.removeAttribute('reveal') : next.setAttribute('reveal', '');
}
}, false);
height:auto/max-heightวิธีแก้ปัญหาจะใช้ได้เฉพาะในกรณีที่คุณกำลังขยายพื้นที่มากกว่าที่heightคุณต้องการ จำกัด หากคุณมีmax-heightของ300pxแต่เป็นกล่องคำสั่งผสมแบบเลื่อนลงซึ่งสามารถกลับมา50pxแล้วmax-heightจะไม่ช่วยให้คุณ50pxเป็นตัวแปรขึ้นอยู่กับจำนวนขององค์ประกอบคุณสามารถมาถึงสถานการณ์ที่เป็นไปไม่ได้ที่ฉันไม่สามารถแก้ไขได้เพราะheightไม่ได้ แก้ไขheight:autoเป็นวิธีแก้ปัญหา แต่ฉันไม่สามารถใช้การเปลี่ยนกับสิ่งนี้