wie verschachtelte Übergänge verwenden, um mit sass

Question

ich diese sass Übergänge haben:

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

die Hover funktioniert gut, und die Übergänge funktioniert auch mit Ausnahme des .artistInfo Übergang.

Answer 1

Sie können die Anzeigeeigenschaft nicht animieren. Was können Sie tun, animieren ist Opazität

.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

Vielleicht ist da „}“ in der falschen Stelle „.card: schweben“

richtig:

.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

Ihre Verschachtelung korrekt ist einfach haben keinen Übergang auf Ihre '.artistInfo'-Klasse. Die Aktualisierung sollte folgendermaßen funktionieren:

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