如何在sass中使用嵌套过渡

Question

I have this sass transitions:

      .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;
        }
      }

the hovers works fine, and the transitions works too except for the .artistInfo transition.

Answer 1

You can't animate display property. What you can do is animate opacity

.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

Answer 2

Maybe is because "}" is in the incorrect place for ".card:hover"

correct:

.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 3

Your nesting is correct you just don't have a transition on your '.artistInfo' class. Updating to this should work:

.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
    }
}