Angular JS Animation with ng-show not working properly

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

不知道爲什麼它有所作爲。