在ng-show上启用淡入淡出动画但在隐藏时禁用动画

Question

所以，我希望动画仅在ng-show为true时应用。我很难尝试禁用“淡出”效果。在jQuery中，这只是$ .hide而不是$ .fadeOut。我如何在Angular中实现这一目标？

http://jsfiddle.net/7twjd3an/2/

CSS

.fadeIn {
  -webkit-transition:all linear 0.25s;
  transition:all linear 0.25s;
}

.fadeIn.ng-hide {
  opacity:0;
}

.fadeIn.ng-show {
    opacity: 1;
}

Answer 1

您可以为.ng-show和.ng-hide

添加不同的转场

在隐藏元素时，将以下内容添加到.ng-hide将删除过渡样式，同时在显示元素时保留现有过渡样式：

.ng-hide {
    opacity: 0;
    transition: none 0;
}