Question

在我正在构建的React应用程序中，我希望隐藏按钮直到满足某些条件。然后，我要从另一个元素的下方对其进行动画处理。此刻，我总是渲染按钮并在需要隐藏时添加一个“隐藏”类。 SASS看起来像这样：

button {
  display: inline-block;
  width: 100%;
  height: 63px;
  transition: height 250ms ease-in-out;
  font-size: 24px;

  &.hidden {
    height: 0;
  }
}

但是当按钮隐藏时，元素变小，但文本仍然可见。与此类似：https://jsfiddle.net/dtu56e1j/

我在做什么错？还是有更好的方法来获得动画的按钮？

Answer 1

IMO，其他答案为您的问题提供了有效但复杂的解决方案。简而言之，您缺少一个CSS属性-from sklearn.model_selection import train_test_split X_train, X_test, y_train, y_test = train_test_split(X, y, test_size=0.35, ` `random_state=100) from sklearn.linear_model import LinearRegression lm = LinearRegression lm.fit(X_test,y_test)。

我创建了这个StackBlitz来说明这一点。

但是，对原始代码的唯一必要修改是：

overflow: hidden

进行小提琴以更好地匹配用例：https://jsfiddle.net/smn6xgv2/

由于按钮元素具有一些内部填充，因此设置button { overflow: hidden; [...] }并不能完全从显示中删除该元素。为了解决该问题，我们将height: 0包裹在button内，然后为div的高度设置动画。

此外，div应该保留默认值div。在原始示例中，display: block使浏览器保留最低高度display: inline-block。 this SO question

中的更多信息

Answer 2

只需做一些工作，您就可以使用translateY很好地完成这项工作

const el = document.querySelector("#testButton");

setInterval(() => {
  el.classList.toggle("hidden");
}, 2000);

button {
  display: inline-block;
  background-color: darkblue;
  color: white;
  width: 100%;
  height: 63px;
  transition: transform 250ms ease-in-out;
  font-size: 24px;
}

button.hidden {
  transform: translateY(63px); /* or -63px to invert */
}

/* Make a wrapper class so that your button disappears on transform */
.wrapper {
  height: 63px;
  overflow: hidden;
}

<div class="wrapper">
  <button id="testButton">My Button!</button>
</div>

CSS Animate按钮出现

2 个答案: