Как убрать размер при анимации?

Question

[kirillleogky]

У меня блок смотрит на стейт:

<div className={this.state.isBonus ? "checkout__bonus-types--active": "checkout__bonus-types"}>
</div>

Стили

checkout__bonus-types {
    opacity: 0;
    transform: translate3d(0, -20%, 0);
    transition: all 0.5s ease-out;
}
  checkout__bonus-types--active {
      opacity: 1;
      transform: translate3d(0, 0, 0);
      transition: all 0.3s ease-out;
    }

Как убрать граматно размер у блока после анимации?
Очень хотелось бы ипользовать scaleY(0) но с ним анимация изменяется а мне нужно именно

opacity: 0;
    transform: translate3d(0, -20%, 0);

Comments

[Arthur Satankiewicz]

такое только не такое??

[kirillleogky]

Arthur Satankiewicz,

Вот так
Только мне нужно не использовать height как в примере

Answer 1

[hzzzzl]

вот фиддл



что значит "убрать размер после анимации", как это должно выглядеть?

Comments

[hzzzzl]

так?

[kirillleogky]

hzzzzl,

Вот так
Только мне нужно не использовать height как в примере