CODEWITHSUNDEEP
cssangularjs
user2327642
user2327642

Reputation: 495

AngularJS CSS Transitions: List Item with Controls That Slide In/Out

I am trying to create a list item with controls on the left and right side that slide in when the user starts editing the list and slide out when the user is done. I have a working example but the list item title is not resized correctly during the CSS transition:

http://plnkr.co/edit/BxsVoTZbr08SI519HSVc?p=preview

I believe the problem is with my CSS code. How can I make this work?

Upvotes: 0

Views: 435

Answers (1)

GRaAL
GRaAL

Reputation: 626

I think that css transform is not the option here as it changes the element view without changing area it fits in DOM, so neighbor elements (like Title in your case) are not affected.

One of the options is to use margins - for example for left block you can set -100px margin at the beginning of animation and 0px at the end and it will slide correctly (here is the plunker with example). But in this case you need to specify exact width of both left/right blocks and use the same value for margins.

Upvotes: 1

Related Questions