第一项没有得到角度ng级动画

Question

这可能是一个简单的问题，但我坚持在这一个3小时，我不明白为什么第一个元素不动画。

在我的HTML我有：

<md-button class="md-fab md-mini md-primary {{produit.dispos[0] 
         | ifNull:'disabled' 
         | ifTrue:'enabled' 
         | ifFalse:'disabled'}}" ng-class="{'no-shadow': hovered}" ng-mouseenter="hovered = true" ng-mouseleave="hovered = false" aria-disabled ng-click="updateProduct(produit,btnDispo=0,btnProduct=produit.indexProduitBoutique,btnCommande=$parent.$parent.$index)"> 
          V <span class="text"> 
          disponible en boutique 
         </span> 
</md-button> 
<md-button class="md-fab md-mini md-primary {{produit.dispos[0] 
         | ifNull:'enabled' 
         | ifTrue:'disabled' 
         | ifFalse:'disabled'}} " ng-class="{'no-shadow': hovered}" ng-mouseenter="hovered = true" ng-mouseleave="hovered = false" aria-disabled ng-click="updateProduct(produit,btnDispo=1,btnProduct=produit.indexProduitBoutique,btnCommande=$parent.$parent.$index)"> 
          ?<span class="text"> 
          disponible en boutique 
         </span> 
         </md-button> 
<md-button class="md-fab md-mini md-primary {{produit.dispos[0] 
         | ifNull:'disabled' 
         | ifTrue:'disabled' 
         | ifFalse:'enabled'}}" ng-class="{'no-shadow': hovered}" ng-mouseenter="hovered = true" ng-mouseleave="hovered = false" aria-disabled ng-click="updateProduct(produit,btnDispo=2,btnProduct=produit.indexProduitBoutique,btnCommande=$parent.$parent.$index)"> 
          X 
         </md-button> 

在我SCSS

：

.md-button.md-fab { 
top: 27px; 
border-radius: 35px; 
&:nth-child(1){ 
    &.enabled,&:hover{ 
    background: #4caf50; 
    color: white; 
    } 
    &:hover{ 
    z-index:999; 
    width: 100%; 
    border-radius: 35px; 
    position: absolute; 
    text-align: left; 
    span{ 
     margin-left: 10px; 
    } 
    .text{ 
     display: inline-block; 
    } 
    } 
    .text{ 
    display: none; 
    font-size: 14px; 
    text-transform: none; 
    } 
    -webkit-transition: width .3s, height .3s, background-color .3s, z-index 1s; 
    transition: width .3s, height .3s, background-color .3s, z-index 1s; 
    position: absolute; 
    left:0; 
    background: white; 
    color: black; 
} 
&:nth-child(2){ 
    &.enabled,&:hover{ 
    background: #ffc617; 
    color: white; 
    } 
    &:hover{ 
    z-index:999; 
    width: 100%; 
    border-radius: 35px; 
    position: absolute; 
    text-align: left; 
    left:0; 
    span{ 
     margin-left: 10px; 
    } 
    .text{ 
     display: inline-block; 
    } 
    } 
    .text{ 
    display: none; 
    font-size: 14px; 
    text-transform: none; 
    } 
    position: absolute; 
    left:80px; 
    background: white; 
    color: black; 
    -webkit-transition: width .3s, height .3s, background-color .3s, left .3s, z-index 1s; 
    transition: width .3s, height .3s, background-color .3s, left .3s,z-index 1s; 
} 
&:nth-child(3){ 
    &.enabled, &:hover{ 
    background: #d32f2f; 
    color: #fff; 
    } 
    background: white; 
    color: black; 
    position: absolute; 
    left:160px; 
} 
} 

的事情是，如果我删除了纳克级的一切工作正常，如果我把它仅在第二和第三，第二元件不动画。

找不到原因。如果你们有想法，或者它是否会重复，请告诉我。

谢谢。

Answer 1

这里是一个拨弄我的工作示例做：

https://jsfiddle.net/thenalbachs/sx0uujgf/

我认为你缺少的是CSS

transition: all 

小提琴代码：

HTML

<div ng-app ng-controller="AnimationController"> 
    <div id="test" class="shadow" ng-class="{noShadow: disableShadow}" ng-mouseenter="disableShadow = true" ng-mouseleave="disableShadow = false"> 
    Test Text 
    </div> 
</div> 

CSS

.shadow { 
    box-shadow: 2px 2px 8px 0 #888; 
} 

.noShadow { 
    box-shadow: 0 0 0 0 #888; 
} 

#test { 
    width: 200px; 
    padding: 20px; 
} 

JS

function AnimationController($scope) { 
    $scope.disableShadow = false; 
}