第一项没有获得带有角度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;
}
}

问题是，如果我删除 ng 类一切正常，如果我只把它放在第二个和第三个上，第二个元素不会动画。

想不通为什么。如果你们有想法，或者如果它是重复的，请告诉我。

谢谢。

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