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

时间:2017-06-28 13:41:01

标签: html css toggle

我有这个简单的隐藏/显示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

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

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:1)

我会将你的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;