Flex animation

Question

When I open the accordion element, I used the animation. But the accordion element has an image that wraps in multiple lines using the flex flex property for CSS3. Whenever I open the accordion, additional content is displayed on the right during the transition. Can anyone suggest what can be done to solve it? And this happens when the width of the content is small.

Another problem is that I used the animation to repeat the animation to remove the item. But when I open the accordion element, the animation is applied to them, which means it animates the image as a list.

.list .item-accordion {
  -webkit-transition:0.09s all linear ;
  transition: 0.09s all linear;
}

This is the animation I'm using.

Code demo here: http://plnkr.co/edit/FnQVCYrSGOlpk5wNxAZ6?p=preview

Answer 1

I had similar problems when meeting complex animation requirements. I used greensock for more complex animations, but this does not seem to be required here. The general concept is that you will want to animate something, but change / change the properties before and after the animation. You will need to use several promises callbacks to start additional animation after completing the first part of the animation or performing manual calculations and setting properties before starting or ending.

Angular Animation

Ionic animated

, onStart onEnd. onStart reset End, , . , / , , , . , , , reset .