ngAnimate：使用ngShow的工具提示正在淡出，但不會消失

根據Angular ngAnimate docs，在ngShow中使用基於類的動畫只是使用CSS類型爲.foo.ng-hide的轉換。然而，當我這樣做來顯示和隱藏工具提示時，提示就會出現在沒有過渡的情況下。然而，忽略提示顯示淡出。我錯過了什麼？ Codepen here。ngAnimate：使用ngShow的工具提示正在淡出，但不會消失

當我檢查代碼時，我發現ng-animate類適用於淡出，但不適用於淡入。也就是說，當角度刪除.ng-hide類時，它只是將其刪除，而不包含和ng-hide-remove類，這是我期望看到的。

HTML

<div ng-app="tooltipping" ng-controller="tipCtrl as tip"> 
    <ul> 
    <li><a href="#" ng-click="tip.toggle()">Toggle the Tip</a> 
     <span class="tip" ng-show="tip.showTip">Tip: Usually 15-20% of the bill.</span> 
    </li> 
    </ul> 
</div>

CSS

li { 
    display: block; 
    position: relative; 
} 
.tip { 
    display: block; 
    margin-left: 3rem; 
    border: 1px solid tomato; 
    padding: 1rem; 
    position: absolute; 
    left: 8rem; 
    opacity: 1; 
} 
.tip.ng-hide { 
    transition: 5s ease all; 
    opacity: 0; 
}

(function(){ 
    angular.module('tooltipping', ['ngAnimate']); 
    angular.module('tooltipping').controller('tipCtrl', function(){ 
    var vm = this; 
    vm.showTip = false; 

    vm.toggle = function(){ 
     vm.showTip = !vm.showTip; 
    }; 
    }); 
})();

來源

2016-02-19 Scott McD.

這裏有一個更新Codepen。

我添加了正常工作，有。工作尖端

關鍵的區別是過渡性質是在CSS的類名第二提示。比較：

.tip { 
    display: block; 
    margin-left: 3rem; 
    border: 1px solid tomato; 
    padding: 1rem; 
    position: absolute; 
    left: 8rem; 
    opacity: 1; 
} 
.tip.ng-hide { 
    transition: 3s ease all; 
    opacity: 0; 
}

和

.working-tip { 
    display: block; 
    margin-left: 3rem; 
    border: 1px solid tomato; 
    padding: 1rem; 
    position: absolute; 
    left: 8rem; 
    opacity: 1; 
    transition: 3s ease all; 
} 
.working-tip.ng-hide { 
    opacity: 0; 
}

唯一的區別是，過渡屬性是在類而不是類+ NG隱藏塊。做第二種方式會導致預期的行爲。我仍然不清楚爲什麼，所以我很樂意聽到任何解釋。

來源

2016-02-19 21:27:24

ngAnimate：使用ngShow的工具提示正在淡出，但不會消失

回答

相關問題