comment utiliser des transitions imbriquées avec SASS

Question

J'ai cette transition 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; 
     } 
     } 

les survols fonctionne très bien, et les transitions fonctionne aussi, sauf pour la transition .artistInfo.

Answer 1

Vous ne pouvez pas animer la propriété d'affichage. Ce que vous pouvez faire est d'animer l'opacité

.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

est peut-être parce que "}" est dans le mauvais endroit pour ".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

Votre imbrication est correcte, vous n'avez tout simplement pas de transition votre classe '.artistInfo'. La mise à jour de ceci devrait fonctionner:

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