AngularJS CSS 动画不工作

Question

我无法让动画仅适用于 ng-show。

这适用于淡出和淡入:

        .animate-show {
            display: block !important;
            -webkit-transition:all linear 1.5s;
            transition:all linear 1.5s;
        }

        .animate-show.ng-hide {
            opacity:0;
        }

    <div ng-show="match.userId" style="margin-right: auto; margin-left: auto;" class="padding animate-show ng-hide">
      ...
    </div>

我只想淡入......隐藏时没有动画。这行不通

       .animate-show {
            display: block !important;
        }

        .animate-show.ng-hide-remove.ng-hide-remove-active {
            -webkit-transition:all linear 1.5s;
            transition:all linear 1.5s;
        }

        .animate-show.ng-hide {
            opacity:0;
        }

这是一个 plunkr:

http://plnkr.co/edit/9KNqt5TAZ8Ejy8eeJUQs

Answer 1

.animate-show.ng-hide-remove.ng-hide-remove-active {

ng-hide-remove-active 来不及了，你只需要 ng-hide-remove。

Working plunker