NG-动画

Question

我想aniamte隐藏一些利的行为而表现出一些其他的李如下

<ul class="slides"> 
    <li ng-show="bullet1"> 
     <h1>The Fore-front of Design &amp; Technology</h1> 
    </li> 
    <li ng-show="bullet2"> 
     <h1>Multi-Purpose User Centric Design</h1> 
    </li> 
    <li ng-show="bullet3"> 
     <h1>Made with Love, Released for Free</h1> 
    </li> 
    </ul> 
    <div class="button-list"> 
    <button class="btn btn-circle" ng-click="changeBullet('bullet1')" ng-class="{'active': bullet1}">1</button> 
    <button class="btn btn-circle" ng-click="changeBullet('bullet2')" ng-class="{'active': bullet2}">2</button> 
    <button class="btn btn-circle" ng-click="changeBullet('bullet3')" ng-class="{'active': bullet3}">3</button> 

    </div> 

CSS的UL列表：

.slides li { 
    -webkit-transition: all linear 1s; 
    transition: all linear 1s; 
} 

.slides li.ng-hide { 
    opacity: 0; 
} 

隐藏的过渡效果和显示不会发生。有人能指出我在这里错过了什么吗？

Plnkr：http://plnkr.co/edit/rzxgGgXiobnavy3XQqHu

Answer 1

我认为这是因为显示：没有，我几乎可以肯定这一转变不会对显示器搭配使用。