angular.js - angularjs ng-animate not working in ng-repeat case issue

Question

If you want to achieve the display of ng-enter during ng-repeat, delay or some background animation during ng-leave, further use ng-enter-stagging to display multiple items at the same time, but when ng-repeat builds the list No animations are shown. I couldn't find the problem and tried many demos, but nothing could be done.
The following is the HTML code:

<pre>
<p ng-repeat="item in items" class="repeated-item">
  {{ item}}
</p>
</pre>

The following is the css code:

.repeated-item{
    border: solid 1px;
    opacity: 1;
    transition:3s linear all;
}
/*动画开始前*/

.repeated-item.ng-enter, .repeated-item.ng-move {
  -webkit-transition:3s linear all;
  -moz-transition:3s linear all;
  -o-transition:3s linear all; 
  background-color: red;
  opacity:0;
}

I tried adding animation to .repeated-item, but it still didn’t work. Please help me, teachers, to answer this question! Sorry to bother everyone!

Answer 1

Are you sure your transition is correct? How do I see the syntax is:

Then it should be:

.repeated-item{
    border: solid 1px;
    opacity: 1;
    transition: all 3s linear;
}

Answer 2

Same question, please ask God

Answer 3

The animation of repeat is created from scratch. Add a button and write the data into items and you should be able to have animation