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 在动画之前是 visible，当它应该向上滚动时，它是 hidden 在动画之前，当它应该向上滚动时向下滚动。

超过 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>

CSS 添加第二个转换

CSS Adding Second Transition

javascript

html

css

button

transition