Question

根据Angular ngAnimate docs，使用基于类的动画和ngShow只是使用.foo.ng-hide类的CSS转换。但是，当我这样做以显示和隐藏工具提示时，提示会显示没有过渡。然而，解雇小费表明了淡出。我错过了什么？ Codepen here

当我检查代码时，我发现ng-animate类适用于淡出，但不适用于淡入。也就是说，当angular移除.ng-hide类时，它只会删除.ng-hide-animate和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;
}

JS

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

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

Answer 1

这是一个更新的Codepen。

我添加了第二个工具提示，该工具提示正常工作，类名为.working-tip

关键区别在于过渡属性在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-hide中。以第二种方式执行此操作会导致预期的行为。我还不太清楚为什么，所以我很乐意听到任何解释。

ngAnimate：使用ngShow的工具提示逐渐淡出，但没有消失

1 个答案: