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的工具提示正在淡出，但不会消失

回答

相关问题