1

I don't really know how to do this, so I come to see if anybody has faced this problem before. I'm working over Ionic, but maybe this isn't a major problem if you're used to make animations.

Well, this is my animation is meant to do, fluently:

enter image description here

after click:

enter image description here

Well, as I don't know how many items I will be showing, I can't select a fixed "height" amount in my animation:

  animations: [
    trigger('openItem', [
      state('closed', style({
        height: "0px",
        opacity: 0
      })),
      state('opened', style({
        height: "auto",
        opacity: 1
      })),
      transition('* => *', animate('.35s'))
    ])
  ]

Choosing "auto" will change between states violently, not showing the animation in a fluent way. I would want to set that "height" value dynamically: each one of my rows is 30px tall, so I could calculate the length of the array I'm passing in, multiplicate it by 30, and pass that value to the animation.

But... is there any way to do so? Which other solution would you recommend me, otherwise?

Thank you!

Zerok
  • 1,323
  • 1
  • 24
  • 56
  • It is hard if you want to [transition `height: auto`](https://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css). Now you have some selection: caculate actual height or use [Jquery toggle function](http://api.jquery.com/toggle/) or use [bootstrap collapse](http://getbootstrap.com/docs/4.0/components/collapse/) – Duannx Nov 02 '17 at 07:14

0 Answers0