css - 移除悬停状态时过渡不平滑

Question

因此，当一个人将鼠标悬停在图像上时，我创建了一个过渡。这会导致文本从底部出现，工作顺利。但是，当我移开鼠标并且悬停状态消失时，文本会迅速恢复到不透明状态，这会破坏效果。

我为此创建了一个代码笔。将鼠标悬停在图像上以了解我的意思。 http://codepen.io/acha5066/pen/bNxyob

这是我的 sass:(我正在使用 Compass)

$grey: #eaeaea;

.content {
  width: 200px;
  margin: 0 auto;
  position: relative;
}

.content-header {
  img {
    max-width: 100%;
    height: auto;
  }
}
.content-main {
  position: absolute;
  top: 100%;
  left: 0;
  @include transition(all 1s ease);
  @include opacity(0);
  background-color: rgba($grey, 0.8);
  height: 0;
  overflow: hidden;
   .link {
    border-top: 1px solid darken($grey, 20%);
  }
}

.content:hover {
   .content-main {
    top: 0;
    left: 0;
    padding: 10px 0;
    background-color: darken(rgba($grey, 0.8), 20%);
    @include opacity(1);
    height: auto;
    overflow: visible;
  } 
}

更新 根据要求编译 CSS

.content {
  width: 200px;
  margin: 0 auto;
  position: relative;
}

.content-header img {
  max-width: 100%;
  height: auto;
}

.content-main {
  position: absolute;
  top: 100%;
  left: 0;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  background-color: rgba(234, 234, 234, 0.8);
  height: 0;
  overflow: hidden;
}
.content-main .link {
  border-top: 1px solid #b7b7b7;
}

.content:hover .content-main {
  top: 0;
  left: 0;
  padding: 10px 0;
  background-color: rgba(183, 183, 183, 0.8);
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
  height: auto;
  overflow: visible;
}

Answer 1

code pen

因此，如果您删除 .content-main 上设置的 height: 0 和 overflow: hidden，因为它会导致文本折叠你离开了。这里文本淡入淡出

$grey: #eaeaea;

.content {
  width: 200px;
  margin: 0 auto;
  position: relative;
  @include transition(all 1s ease);
}

.content-header {
  img {
    max-width: 100%;
    height: auto;
  }
}
.content-main {
  position: absolute;
  top: 100%;
  left: 0;
  @include transition(all 1s ease);
  @include opacity(0);
  background-color: rgba($grey, 0.8);
   .link {
    border-top: 1px solid darken($grey, 20%);
  }
}

.content:hover {
   .content-main {
    top: 0;
    left: 0;
    padding: 10px 0;
    background-color: darken(rgba($grey, 0.8), 20%);
    @include opacity(1);
    height: auto;
    overflow: visible;
  } 
}