Угловых нг-показать/скрыть анимации

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

Он не чувствует, как нг-одушевленных успешно добавлен в качестве зависимости ,

---

---

UPDATE:

Обновлено 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>