Question

我的网站上有一些文本，仅当用户单击标题时才显示，然后以动画形式显示文本，而当用户再次单击标题时，该文本消失。我做了下面的代码，它对于“显示更多”非常有用，但是由于某种原因，它对于“显示更少”却不起作用！

function showMore(resp) {
  if (document.getElementById(resp).style.maxHeight == "400") {
    document.getElementById(resp).style.animation = "showmore 2s ease-in-out reverse";
    document.getElementById(resp).style.maxHeight = "0";
  } else {
    document.getElementById(resp).style.animation = "showmore 2s ease-in-out";
    document.getElementById(resp).style.maxHeight = "400";
  }
}

@keyframes showmore {
  0% {
    opacity: 0;
    max-height: 0;
  }
  100% {
    opacity: 1;
    max-height: 400px;
  }
}

.awr {
  text-align: left;
  margin-left: 10px;
  font-size: 17;
  color: dimgrey;
  max-height: 0;
  overflow: hidden;
}

<div class="question" onclick="showMore('awr1')">
  <h3>How it Works?</h3>
</div>
<div class="awr" id="awr1">
  <p>this is the text that must be hidden.</p>
</div>

有人可以帮助我吗？

Answer 1

我用jQuery实现，但是您可以轻松地转换成Javascript。

您只需添加一个类并进行切换即可。

function showMore(resp) {
  $("#" + resp).toggleClass("show");
}

.awr {
  text-align: left;
  margin-left: 10px;
  font-size: 17;
  color: dimgrey;
  height: 0px;
  visibility: hidden;
  transition: all 0.3s linear;
  background-color: #F1F1F1;
}

.show {
  visibility: visible;
  height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="question" onclick="showMore('awr1')">
  <h3>How it Works?</h3>
</div>
<div class="awr" id="awr1">
  <p>this is the text that must be hidden.</p>
</div>

Answer 2

您可以使用CSS transition而不是animation来执行此操作。过渡基本上观察给定属性的变化并将其从一种状态动画化为另一种状态。如果您只想让所有内容更改后都可以进行动画处理，也可以在此处使用all关键字。

.show {
  opacity: 1;
  max-height: 400px;
}
.awr {
  /* your other styles here */
  opacity: 0;
  max-height: 0;
  transition: all 2s;
}

如果我没记错的话，宽松也是默认行为。然后，以通常的方式使用JavaScript切换类。例如，这是我的首选方法：

const showMore = resp => document.querySelector(`#${resp}`).classList.toggle('show')

显示更多/显示更少CSS JS动画不起作用

2 个答案: