如何在 HTML 中平滑地垂直居中 *injected* div？
How to vertically center *injected* div in HTML smoothly?
我有一个 div 完全居中的礼貌 flex。现在我将一些内容动态地注入居中 div。它当然保持居中，但它猛然到那个居中的位置，看起来非常丑陋。
有什么办法可以让对中顺畅吗？我尝试设置 transition: all 但没有效果。
这里有一个fiddle供参考和快速测试：http://jsfiddle.net/qv8fLu4n/
您注入内容的方式是使用 display: none - 您不能 transition 属性； see here 可以具有 animations/transitions.
的属性列表
我建议设置不同的动画 属性 或以不同的方式处理动态内容注入。
如果您愿意，您可以使用 jquery 轻松完成此操作，如 this fiddle or use a css helper class, as seen in this fiddle 及以下所示。
$('#injection-button').click(function(){
$('.injected-block').toggleClass('shrink');
});
html, body {
height: 100%
}
body {
text-align: center;
display: flex;
}
.center-me {
margin: auto;
width: 50%;
}
.injected-block {
max-height: 800px;
transition: max-height 1s;
overflow: hidden;
}
.shrink {
max-height: 0px;
transition: all 1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div class="center-me">
<h1> Center me plz </h1>
<button id="injection-button">Click me to test!</button>
<div class="injected-block">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</body>
我建议在页面加载时获取要缩小的元素的高度，将其设置为元素的 max-height，然后切换 max-height 属性 在 0px 和 initial height of element 之间。例如：
var i = document.querySelector(".injected-block");
var maxHeight = i.clientHeight + 'px';
i.style.maxHeight = maxHeight;
document.getElementById("injection-button").onclick = (function () {
if (i.style.maxHeight === '0px') {
i.style.maxHeight = maxHeight;
} else {
i.style.maxHeight = 0;
}
});
然后可以在消失的元素上使用 transition: max-height 处理动画，例如
.injected-block {
overflow: hidden;
transition: max-height 0.2s;
}
这是一个JSFiddle
编辑
由于目标是从元素不可见开始，您将不得不求助于一些 hacky 的东西。这是一个函数，它将获取不可见元素，将其粘贴在屏幕外 div 和 return 它的高度。
var getHeight = function(el) {
var hiddenDiv = document.getElementById('hidden');
var clone = el.cloneNode(true);
clone.className = '';
clone.style.width = el.clientWidth + 'px';
hiddenDiv.appendChild(clone);
var height = clone.clientHeight + 'px';
hiddenDiv.removeChild(clone);
return height;
};
所以你会像这样使用它：
var i = document.querySelector(".injected-block");
var maxHeight = getHeight(i);
i.style.maxHeight = 0;
这使用了div#invisible。示例 CSS（需要根据您的情况进行调整）是：
#hidden {
position: fixed;
top: -1000px;
left: -1000px;
}
还有一个 JSFiddle。干杯！
您可以使用元素的 opacity 和 height 来完成此操作，而不是使用 CSS 转换无法控制的 display。
// Since it isn't set in the CSS, we need to track the initialHeight of the element
var i = document.querySelector(".injected-block");
var initialHeight = window.getComputedStyle(i, null).getPropertyValue("height");
// Set defaults
i.style.opacity = 1;
i.style.height = initialHeight;
document.getElementById("injection-button").onclick = (function () {
if (i.style.opacity != "1") {
// Currently hidden, make it opaque and back to the inital height
i.style.opacity = "1";
i.style.height = initialHeight;
} else {
// Currently visible, make it slowly invisible and 0px high
i.style.opacity = "0";
i.style.height = "0px";
}
});
html, body {
height: 100%;
}
body {
text-align: center;
display: flex;
}
.center-me {
margin: auto;
width: 50%;
}
.injected-block {
transition: height 1s linear, opacity 1s ease-in-out;
overflow: hidden;
}
<body>
<div class="center-me">
<h1> Center me plz </h1>
<button id="injection-button">Click me to test!</button>
<div class="injected-block">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</body>
http://jsfiddle.net/qv8fLu4n/4/
尝试阻止最初不可见的示例
// Since it isn't set in the CSS, we need to track the initialHeight of the element
var i = document.querySelector(".injected-block");
var initialHeight = window.getComputedStyle(i, null).getPropertyValue("height");
// Set defaults
i.style.left = '-9999999px';
i.style.position = 'absolute';
i.style.opacity = "0";
i.style.height = '0px';
document.getElementById("injection-button").onclick = (function () {
if (i.style.opacity == "0") {
// Currently hidden, make it opaque and back to the inital height
i.style.opacity = "1";
i.style.height = initialHeight;
i.style.position = 'relative';
i.style.left = '0px';
} else {
// Currently visible, make it slowly invisible and 0px high
i.style.opacity = "0";
i.style.height = "0px";
}
});
html, body {
height: 100%;
}
body {
text-align: center;
display: flex;
}
.center-me {
margin: auto;
width: 50%;
}
.injected-block {
transition: height 1s linear, opacity 1s ease-in-out;
overflow: hidden;
}
<body>
<div class="center-me">
<h1> Center me plz </h1>
<button id="injection-button">Click me to test!</button>
<div class="injected-block">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</body>
我有一个 div 完全居中的礼貌 flex。现在我将一些内容动态地注入居中 div。它当然保持居中，但它猛然到那个居中的位置，看起来非常丑陋。
有什么办法可以让对中顺畅吗？我尝试设置 transition: all 但没有效果。
这里有一个fiddle供参考和快速测试：http://jsfiddle.net/qv8fLu4n/
您注入内容的方式是使用 display: none - 您不能 transition 属性； see here 可以具有 animations/transitions.
我建议设置不同的动画 属性 或以不同的方式处理动态内容注入。
如果您愿意，您可以使用 jquery 轻松完成此操作，如 this fiddle or use a css helper class, as seen in this fiddle 及以下所示。
$('#injection-button').click(function(){
$('.injected-block').toggleClass('shrink');
});
html, body {
height: 100%
}
body {
text-align: center;
display: flex;
}
.center-me {
margin: auto;
width: 50%;
}
.injected-block {
max-height: 800px;
transition: max-height 1s;
overflow: hidden;
}
.shrink {
max-height: 0px;
transition: all 1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div class="center-me">
<h1> Center me plz </h1>
<button id="injection-button">Click me to test!</button>
<div class="injected-block">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</body>
我建议在页面加载时获取要缩小的元素的高度，将其设置为元素的 max-height，然后切换 max-height 属性 在 0px 和 initial height of element 之间。例如：
var i = document.querySelector(".injected-block");
var maxHeight = i.clientHeight + 'px';
i.style.maxHeight = maxHeight;
document.getElementById("injection-button").onclick = (function () {
if (i.style.maxHeight === '0px') {
i.style.maxHeight = maxHeight;
} else {
i.style.maxHeight = 0;
}
});
然后可以在消失的元素上使用 transition: max-height 处理动画，例如
.injected-block {
overflow: hidden;
transition: max-height 0.2s;
}
这是一个JSFiddle
编辑
由于目标是从元素不可见开始，您将不得不求助于一些 hacky 的东西。这是一个函数，它将获取不可见元素，将其粘贴在屏幕外 div 和 return 它的高度。
var getHeight = function(el) {
var hiddenDiv = document.getElementById('hidden');
var clone = el.cloneNode(true);
clone.className = '';
clone.style.width = el.clientWidth + 'px';
hiddenDiv.appendChild(clone);
var height = clone.clientHeight + 'px';
hiddenDiv.removeChild(clone);
return height;
};
所以你会像这样使用它：
var i = document.querySelector(".injected-block");
var maxHeight = getHeight(i);
i.style.maxHeight = 0;
这使用了div#invisible。示例 CSS（需要根据您的情况进行调整）是：
#hidden {
position: fixed;
top: -1000px;
left: -1000px;
}
还有一个 JSFiddle。干杯！
您可以使用元素的 opacity 和 height 来完成此操作，而不是使用 CSS 转换无法控制的 display。
// Since it isn't set in the CSS, we need to track the initialHeight of the element
var i = document.querySelector(".injected-block");
var initialHeight = window.getComputedStyle(i, null).getPropertyValue("height");
// Set defaults
i.style.opacity = 1;
i.style.height = initialHeight;
document.getElementById("injection-button").onclick = (function () {
if (i.style.opacity != "1") {
// Currently hidden, make it opaque and back to the inital height
i.style.opacity = "1";
i.style.height = initialHeight;
} else {
// Currently visible, make it slowly invisible and 0px high
i.style.opacity = "0";
i.style.height = "0px";
}
});
html, body {
height: 100%;
}
body {
text-align: center;
display: flex;
}
.center-me {
margin: auto;
width: 50%;
}
.injected-block {
transition: height 1s linear, opacity 1s ease-in-out;
overflow: hidden;
}
<body>
<div class="center-me">
<h1> Center me plz </h1>
<button id="injection-button">Click me to test!</button>
<div class="injected-block">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</body>
http://jsfiddle.net/qv8fLu4n/4/
尝试阻止最初不可见的示例
// Since it isn't set in the CSS, we need to track the initialHeight of the element
var i = document.querySelector(".injected-block");
var initialHeight = window.getComputedStyle(i, null).getPropertyValue("height");
// Set defaults
i.style.left = '-9999999px';
i.style.position = 'absolute';
i.style.opacity = "0";
i.style.height = '0px';
document.getElementById("injection-button").onclick = (function () {
if (i.style.opacity == "0") {
// Currently hidden, make it opaque and back to the inital height
i.style.opacity = "1";
i.style.height = initialHeight;
i.style.position = 'relative';
i.style.left = '0px';
} else {
// Currently visible, make it slowly invisible and 0px high
i.style.opacity = "0";
i.style.height = "0px";
}
});
html, body {
height: 100%;
}
body {
text-align: center;
display: flex;
}
.center-me {
margin: auto;
width: 50%;
}
.injected-block {
transition: height 1s linear, opacity 1s ease-in-out;
overflow: hidden;
}
<body>
<div class="center-me">
<h1> Center me plz </h1>
<button id="injection-button">Click me to test!</button>
<div class="injected-block">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</body>