Angularjs 带有ng show的角度JS动画无法正常工作

我正在开发一个angular应用程序，在该应用程序中，我在ng中使用动画，单击按钮时显示属性以显示和隐藏div元素。它在hide case中工作正常，但在show case中工作不正常。它会在没有动画的情况下立即显示元素。您可以在示例中看到相同的行为 ：

我的代码是

<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>

---

我对它进行了一些重构，它似乎正在使用此设置：

    .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;
    }

不知道为什么会有不同

    .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;
    }