1

I have a component within a react/mobx application, which observes a certain property of a provided ui store. Whenever this property changes some elements of the component will hide / show. As far as I understand it, the ReactCSSTransitionGroup is for animating components upon mount / unmount. How do I animate an element (a div to be precise) within a component, which is hidden via display:none but will appear upon chaning the store properties?

Exinferis
  • 689
  • 7
  • 17

2 Answers2

0

Instead of display: none you should set opacity: 0 to hide and opacity: 1 to show. Then you can animate the transition using basic CSS transitions like 

-webkit-transition: all 1s;
transition: all 1s;
Vishwas Singh Chouhan
  • 881
  • 6
  • 11
  • This would lead to the elements still having full height, width, thus receiving click events, influencing page flow etc. – Exinferis Jan 31 '17 at 12:07
  • If you use `display: none` and then `display: block` the transition will be cluttered as you cannot animate display property. To fix that you can use `height: 0` and then animate the height property when you want the div visible. – Vishwas Singh Chouhan Jan 31 '17 at 13:48
  • unfortunately animation to height:auto is not supported, you need to specify either fixed height or use max-height "hack": http://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css – Petr Odut Feb 06 '17 at 15:24
0

Check out css animation property. It will animate the element when it is added to the DOM. So, don't hide the element with display:none, but simply don't render it. When props changes just render it with css animation defined ;)

It is supported by all browsers, IE from v10 (which is quite enough).

Petr Odut
  • 1,667
  • 14
  • 7