ngAnimate：使用 ngShow 的工具提示正在淡出，但没有淡入

Question

根据 Angular ngAnimate docs, using class based animation with ngShow is just a matter of using CSS transition with the .foo.ng-hide class. When I do this to show and hide a tooltip, however, the tip appears without the transition. Dismissing the tip, though, shows the fade-out. What am I missing? Codepen here.

当我检查代码时，我看到 ng-animate classes 应用于淡出，而不是淡入。也就是说，当 angular 删除 .ng-hide class 时，它只是在没有 .ng-hide-animate 和 ng-hide-remove class 的情况下删除它，我会期待看到。

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。

我添加了第二个可以正常工作的工具提示，class 名称为 .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;
}

唯一的区别是转换属性在 class 的块中而不是 class + ng-hide。以第二种方式进行会导致预期的行为。我仍然不太清楚为什么，所以我很想听听任何解释。

ngAnimate：使用 ngShow 的工具提示正在淡出，但没有淡入

ngAnimate: Tooltip using ngShow is fading out, but not fading in

angularjs

ng-animate