ng-animate ul列表

Question

我正试图在隐藏一些李的同时展示其他一些李

<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如下：

.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

我认为这是因为显示：无，而且我几乎可以肯定转换在显示时不起作用。