React åpne/lukke animasjon med react-addons-transition-group

animert-apne-lukk.jsx

import {Component} from 'react';
import {findDOMNode} from 'react-dom'; 

class AnimertApneLukk extends Component {

    // logikk basert på http://n12v.com/css-transition-to-from-auto/
    componentWillEnter(callback) {
        var element = findDOMNode(this);
        var hoyde = element.offsetHeight; // les ut høyden når auto

        element.style.height = '0px';
        element.offsetHeight; // sett høyden til 0 og trigger rerender

        element.classList.add('klasse-med-transition'); // klassen må generelt fjernes og legges til, ellers går safari bananas med animasjoner
        element.style.height = hoyde + 'px'; // sett høyden til høyden ved auto, blir nå animert

        element.addEventListener('transitionend', () => { // må evt. lytte på annet her, se https://davidwalsh.name/css-animation-callback
            element.classList.remove('klasse-med-transition');
            element.style.height = 'auto';
            callback(); // fortell react-transition at vi er klar
            // bør potensielt fjerne listeneren igjen her
        });

    }

    componentWillLeave(cb) {
        var element = findDOMNode(this);
        var autoHeight = element.offsetHeight; // les ut høyden ved auto

        element.style.height = autoHeight + 'px';
        element.offsetHeight; // hardkoder høyden i px og rerendrer

        element.classList.add('klasse-med-transition');
        element.style.height = '0px'; // animerer ned til 0

        element.addEventListener('transitionend', () => {
            cb(); // react transition røsker nå greia ut av domen
        });
    }

    render() {
        return this.props.children;
    }
}

export default AnimertApneLukk;

trekkspill.jsx

import React from 'react';

import ReactTransitionGroup from 'react-addons-transition-group';
import AnimertApneLukk from './animert-apne-lukk.jsx';

const Trekkspill = ({children, erApen}) => {

    return (
        <ReactTransitionGroup>
            {erApen ?
                <AnimertApneLukk>{children}</AnimertApneLukk>
                : null}
        </ReactTransitionGroup>
    );

};

export default Trekkspill;