角度顯示/隱藏動畫

Question

我一直在關注slideUp指南： http ：//ng.malsup.com/#!/css-animations-for-ng-hide_ng-show

除了我想要相反的效果。 我希望內容在點擊時向下滑動/顯示，而不是在點擊時向上滑動/隱藏。 因此，內容在加載時隱藏。 我在這里創建了一個plunker，但似乎沒有工作： http ：//plnkr.co/edit/12wPKGqn4g3Fctm7NKnA

HTML：

<ul>
      <li ng-repeat-start="item in data">
        <p>Name: {{item.name}} <span ng-click="example1=!example1">+</span></p>
      </li>
      <li ng-repeat-end class="cssSlideUp"  ng-hide="example1">
        DOB: {{item.dob}}
        Gender: {{item.gender}}
      </li>
    </ul>

CSS：

.ng-hide-add, .ng-hide-remove {
    /* ensure visibility during the transition */
    display: block !important; /* yes, important */
}

.cssSlideUp {
    transition: .3s linear all;
    height: 100px;
    overflow: hidden;
}
.cssSlideUp.ng-hide {
    height:0;
}

它並不像ng-animate被成功添加為依賴項。

---

---

更新：

更新了plunker： http ：//plnkr.co/edit/Vwuin1KLrNUDSkfv7cBy?p=preview

Answer 1

請看那個演示： http ： //plnkr.co/edit/N6fPYgipvML2rzmEt4So？p = preview

看起來您需要更改DOM的位結構

<ul>
  <li ng-repeat="item in data">
    <p>Name: {{item.name}} <span ng-click="example1=!example1">+</span></p>

  <p  class="cssSlideUp"  ng-hide="example1">
    DOB: {{item.dob}}
    Gender: {{item.gender}}
    </p>
  </li>
</ul>