CSS添加第二个转换

Question

我有一个按钮，当按下它时，div将从底部出现，这与持续0.5秒的转换一起工作。但是，当div向下过渡到消失时，它会向下捕捉，而不是平滑过渡。我试过了，但没能想出一个方法让我的div像向上转换一样向下转换。

i = 0;
function focusInput() {
document.getElementById("infoButton").focus();
}
function blurInput() {
document.getElementById("infoButton").blur();
}
function check() {
if (i == 0) {
focusInput()
i++;
} else {
blurInput()
i--;
}
}

html,
body {
height: 100%;
margin: 0;
overflow-x: hidden;
}
/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.example {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
body {
width: 100vw;
height: 100vh;
margin: 0;
background-color: #eeeeee;
}
.settings {
float: left;
width: 35%;
margin-top: 5px;
text-align: right;
}
.settings .infoButton img {
margin-top: -15px;
margin-left: -5px;
width: 15px;
}
.settings .infoButton {
height: 20px;
width: 20px;
margin-top: 5px;
}
.slide {
text-align: left;
z-index: 999;
visibility: hidden;
position: absolute;
width: 100vw;
height: 100px;
left: 0;
top: 100%;
background-color: #161618;
-webkit-transition: top 0.5s;
transition: top 0.5s;
}
.infoButton:focus + .slide {
visibility: visible;
top: calc(100vh - 100px);
}

<div class="settings">
<button id="infoButton" onclick="check()" class="infoButton"><img src="https://pics.freeicons.io/uploads/icons/png/7410416951552644391-512.png" alt="settings icon"></button>
<div class="slide">
<p>Hello</p>
</div>
</div>

这是我的铅笔编码：https://codepen.io/D4SH13/pen/VwbwgZN

提前谢谢！

Answer 1

Visibility立即切换，因此在任何转换之前执行。.slider在动画之前(当它应该向上滚动时(是可见的，而在动画之前，当它应该向下滚动时，它是隐藏的

top上的翻译会带来性能问题。我把高度的变化改为transform: translateY。

只能为数字属性设置动画，如六进制和。。。嗯，普通数字。所以我通过改变.slider的不透明度来隐藏它。

opacity 1ms 0.5s中的第二个参数是0.5秒的延迟。

我真诚地建议使用另一种解决方案，因为您的.slider将位于页面底部，并且仍然可以点击。所以我在.slider没有聚焦的时候添加了pointer-events: none。

我还更正了您的javascript代码，将"var"；并将i(现在为：sliderOpen(更改为布尔值。

var sliderOpen = true;
function focusInput() {
document.getElementById("infoButton").focus();
}
function blurInput() {
document.getElementById("infoButton").blur();
}
function check() {
if (sliderOpen) {
focusInput()
} else {
blurInput()
}
sliderOpen = !sliderOpen;
}

此外，您不需要那个javascript代码。CSS足以切换.slider。所以我把它移走了，一切仍然有效。

html,
body {
height: 100%;
margin: 0;
overflow-x: hidden;
}
/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.example {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
body {
width: 100vw;
height: 100vh;
margin: 0;
background-color: #eeeeee;
}
.settings {
float: left;
width: 35%;
margin-top: 5px;
text-align: right;
}
.settings .infoButton img {
margin-top: -15px;
margin-left: -5px;
width: 15px;
}
.settings .infoButton {
height: 20px;
width: 20px;
margin-top: 5px;
}
.slide {
text-align: left;
z-index: 999;
position: absolute;
height: 100px;
left: 0;  
background-color: #161618;
/* CHANGED or ADDED */
bottom: 0;
right: 0;
transition: transform 0.5s, opacity 1ms 0.5s;
transform: translateY(100%);
opacity: 0;
pointer-events: none;
}
.infoButton:focus + .slide {
/* CHANGED or ADDED */
opacity: 1;
transform: translateY(0%);
transition: transform 0.5s, opacity 1ms;
pointer-events: auto;
}

<div class="settings">
<button id="infoButton" class="infoButton"><img src="https://pics.freeicons.io/uploads/icons/png/7410416951552644391-512.png" alt="settings icon"></button>
<div class="slide">
<p>Hello</p>
</div>
</div>