如何使用 sass 的嵌套过渡

Question

我有这个 sass 转换：

      .card{
        transition: all 0.5s ease;
        position: relative;
        height: auto;
      }

      .artistInfo{display: none;}

      .card:hover{
        box-shadow: 10px 10px rgba(128, 128, 128, 0.37);
        margin-top: -3%;
        .artistInfo{
          display: block;
        }
      }

悬停效果很好，过渡效果也很好，除了 .artistInfo 过渡。

Answer 1

可能是因为“}”在“.card:hover”的错误位置

正确：

.card{
  transition: all 0.5s ease;
  position: relative;
  height: auto;
}

.artistInfo{display: none;}

.card:hover{
  box-shadow: 10px 10px rgba(128, 128, 128, 0.37);
  margin-top: -3%;
}
.artistInfo{
  display: block;
}

Answer 2

您的嵌套是正确的，只是您的“.artistInfo”上没有过渡 class。对此进行更新应该有效：

.card{
    transition: all 0.5s ease;
    position: relative;
    height: auto;
}

.artistInfo{
    opacity: 0;
    display:none;
    transition: all 0.5s ease
}

.card:hover{
    box-shadow: 10px 10px rgba(128, 128, 128, 0.37);
    margin-top: -3%;
    .artistInfo{
        opacity: 1;
        display: block;
        transition: all 0.5s ease
    }
}

Answer 3

您不能动画显示属性。你可以做的是动画不透明度

.card {
  transition: all 0.5s ease;
  position: relative;
  height: auto;
}

.artistInfo {
  opacity: 0;
  position: absolute;
}

.card:hover {
  box-shadow: 10px 10px rgba(128, 128, 128, 0.37);
  margin-top: -3%;
  &+.artistInfo {
    opacity: 1;
  }
}

http://codepen.io/anon/pen/XMLvqZ

如何使用 sass 的嵌套过渡

how to use nested transitions with sass

html

css

sass

transitions