使用fss淡入淡出时隐藏/显示切换

Question

我有这个简单的隐藏/显示toggle，它在悬停时淡入/淡出文本。唯一的问题是，我不希望它是隐形的（因为它占用了不必要的空间）。但是当我添加显示元素时，淡入淡出功能不再起作用。

#stuff {
  opacity: 0.0;
  -webkit-transition: all 400ms ease-in-out;
  -moz-transition: all 400ms ease-in-out;
  -ms-transition: all 400ms ease-in-out;
  -o-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out;
  color: black;
  text-align: center;
  border-style: solid;
  border-width: 1px;
  border-color: #e0e0e0;
  border-radius: 25px;
  width: 200px;
}

#hover {
  width: 150px;
  height: 10px;
  margin-bottom: 15px;
  cursor: pointer;
  float: center;
  font-family: 'Open Sans', FontAwesome;
  font-weight: 600;
}

#hover:hover+#stuff {
  opacity: 1.0;
  display: inline-block;
}

`

<div id="hover">HOVER HERE</div>
<div id="stuff">Revealed text</div>

使用FADE ANIMATION，但只是隐藏：jsfiddle

没有动画，但在悬停时显示并且不占用空间jsfiddle

是否可以在不使文字不可见的情况下维持淡入淡出动画？

Answer 1

您可以使用max-height删除不需要的空间

请参阅下面的代码段：

#stuff {
  opacity: 0.0;
  -webkit-transition: all 400ms ease-in-out;
  -moz-transition: all 400ms ease-in-out;
  -ms-transition: all 400ms ease-in-out;
  -o-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out;
  color: black;
  text-align: center;
  border-style: solid;
  border-width: 1px;
  border-color: #e0e0e0;
  border-radius: 25px;
  width: 200px;
  max-height:0;
}

#hover {
  width: 150px;
  height: 10px;
  margin-bottom: 15px;
  cursor: pointer;
  float: center;
  font-family: 'Open Sans', FontAwesome;
  font-weight: 600;
}

#hover:hover+#stuff {
  opacity: 1.0;
  max-height:100%;
  
}

<div id="hover">HOVER HERE</div>
<div id="stuff">Revealed text</div>

如果你想让它总是不占用空间，你可以使用绝对位置来摆脱文件的流程

请参阅代码段：

#stuff {
  opacity: 0.0;
  -webkit-transition: all 400ms ease-in-out;
  -moz-transition: all 400ms ease-in-out;
  -ms-transition: all 400ms ease-in-out;
  -o-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out;
  color: black;
  text-align: center;
  border-style: solid;
  border-width: 1px;
  border-color: #e0e0e0;
  border-radius: 25px;
  width: 200px;
  position:absolute;
}

#hover {
  width: 150px;
  height: 10px;
  margin-bottom: 15px;
  cursor: pointer;
  float: center;
  font-family: 'Open Sans', FontAwesome;
  font-weight: 600;
  
}
.wrapper{
  position:relative;
}
#hover:hover + #stuff {
  opacity: 1.0;   
}

<div class="wrapper">
<div id="hover">HOVER HERE</div>
<div id="stuff">Revealed text</div>
<div>

Answer 2

我会将你的div包装在另一个盒子中然后绝对定位你的隐藏文本，这样就不会占用任何空间 - 代码中的注释来解释发生了什么

＆＃13;

＆＃13;

/* add a container */
.container {
  position: relative;
}

#stuff {
  opacity: 0;
  -webkit-transition: all 400ms ease-in-out;
  -moz-transition: all 400ms ease-in-out;
  -ms-transition: all 400ms ease-in-out;
  -o-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out;
  color: black;
  text-align: center;
  border-style: solid;
  border-width: 1px;
  border-color: #e0e0e0;
  border-radius: 25px;
  width: 200px;
  display: inline-block;

  /* position stuff underneath the container */
  position: absolute;
  top: 100%;

  /* give the background a colour so you can't see anything below */
  background: #ffffff;
}

#hover {
  width: 150px;
  cursor: pointer;
  float: center;
  font-family: 'Open Sans', FontAwesome;
  font-weight: 600;
}

/* show stuff on hover of the container - so you can hover the stuff without it dissappearing */
.container:hover #stuff {
  opacity: 1;
}

`

＆＃13;

<div class="container">
  <div id="hover">HOVER HERE</div>
  <div id="stuff">Revealed text</div>
</div>
Some content below

＆＃13;

＆＃13;

＆＃13;