Question

我正在尝试使用简单的过渡，但我不明白为什么它不起作用。你可以帮帮我吗？我把transition: ease-in-out;放在容器中......

我的代码：

.container{
    width:250px;
    height:300px;
    background:#00f;
    position:relative;
    transition: ease-in-out;
}

.show{
    display: none;
    position:absolute;
    bottom:0;
    height:50%;
    width:100%;
    color:#000;
    text-indent:5px;
    background:rgba(255,255,255,.5);
}

.container:hover > .show{
    display:block;
}

http://jsfiddle.net/mAzsL/44/

我以此为例：http://jsfiddle.net/n7Ne9/53/

更新：我的目标是获得被称为“淡入盒子”的效果 - 我不准确，抱歉。

Answer 1

<强>更新

根据新要求，转换效果需要不同，请参阅以下代码段。

.container {
  width: 250px;
  height: 300px;
  background: #00f;
  position: relative;
}

.show {
  position: absolute;
  opacity:0;
  height:30%;
  bottom:0px;
  left:0px;
  right:0px;
  color: #000;
  text-indent: 5px;
  background: rgba(255, 255, 255, .5);
  transition: opacity 0.5s ease-in-out;
}

.container:hover>.show {
  opacity:1;
}

<div class="container">
  <div class="show">Lorem </div>
</div>

旧答案：

问题是transition属性无法应用于CSS属性display:none，解决方法是将高度设置为0px，您将面临的问题是文本仍然是在屏幕上可见。要隐藏这个溢出的文本，请使用CSS类overflow:hidden，它将隐藏元素外部的内容。而不是在父元素上使用转换，而是直接在元素本身上使用它。请参阅以下课程。

.show{
    position:absolute;
    overflow:hidden;
    bottom:0;
    height:0px;
    width:100%;
    color:#000;
    text-indent:5px;
    background:rgba(255,255,255,.5);
    transition: height 1s ease-in-out;
}

过渡属性应如下所示。

transition: height 1s ease-in-out;

首先提一下哪个属性应该具有过渡效果。然后是转换的持续时间，然后是ease-in还是其他设置。

然后在悬停时，设置原始高度。将会看到过渡。

.container:hover > .show{
    height:50%;
}

.container {
  width: 250px;
  height: 300px;
  background: #00f;
  position: relative;
}

.show {
  position: absolute;
  overflow: hidden;
  bottom: 0;
  height: 0px;
  width: 100%;
  color: #000;
  text-indent: 5px;
  background: rgba(255, 255, 255, .5);
  transition: height 1s ease-in-out;
}

.container:hover>.show {
  height: 50%;
}

<div class="container">
  <div class="show">Lorem </div>
</div>

过渡轻松进入;不管用

1 个答案: