angularjs - 带有 ng-show 的 Angular JS 动画无法正常工作

Question

我正在开发一个角度应用程序，我在按钮单击时使用 ng-show 属性中的动画来显示和隐藏 div 元素。它在隐藏情况下工作正常，但在显示情况下不能正常工作，它会立即显示没有动画。您可以在示例中看到相同的行为：http: //yearofmoo-articles.github.io/angularjs-animation-article/app/#/ng-show-hide。

我的代码是

<div class="row-fluid">
                        <button class="btn btn-large btn-success pull-right" type="button" ng-click="showtravelSchedule=!showtravelSchedule">Search</button>
                   </div>

    <div class=" span3 module offset1 community-bulletin" ng-show="showtravelSchedule" ng-animate="{show: 'example-show', hide: 'example-hide'}">
    </div>

而CSS是

.example-show, .example-hide {
-webkit-transition:all linear 0.5s;
-moz-transition:all linear 0.5s;
-ms-transition:all linear 0.5s;
-o-transition:all linear 0.5s;
transition:all linear 0.5s;
}

.example-show {
opacity:0;
}
.example-show.example-show-active {
opacity:1;
}

.example-hide {
opacity:1;
}
.example-hide.example-hide-active {
opacity:0;
}

Answer 1

我对其进行了一些重构，它似乎可以使用以下设置：

    .example-show, .example-hide {
        -webkit-transition:all linear 0.5s;
        -moz-transition:all linear 0.5s;
        -ms-transition:all linear 0.5s;
        -o-transition:all linear 0.5s;
        transition:all linear 0.5s;
    }

    .example-show.example-show-active,
    .example-hide {
        opacity:1;
    }

    .example-hide.example-hide-active,
    .example-show {
        opacity:0;
    }

不知道为什么会有所不同。