How to use css-animation - 10 common examples

resetEffect(node: HTMLElement) {
    if (!node || node === this.extraNode || !(node instanceof Element)) {
      return;
    }
    const { insertExtraNode } = this.props;
    const attributeName = this.getAttributeName();
    node.setAttribute(attributeName, 'false'); // edge has bug on `removeAttribute` #14466
    this.removeExtraStyleNode();
    if (insertExtraNode && this.extraNode && node.contains(this.extraNode)) {
      node.removeChild(this.extraNode);
    }
    TransitionEvents.removeStartEventListener(node, this.onTransitionStart);
    TransitionEvents.removeEndEventListener(node, this.onTransitionEnd);
  }

resetEffect(node: HTMLElement) {
    if (!node || node === this.extraNode || !(node instanceof Element)) {
      return;
    }
    const { insertExtraNode } = this.props;
    const attributeName = this.getAttributeName();
    node.setAttribute(attributeName, 'false'); // edge has bug on `removeAttribute` #14466
    this.removeExtraStyleNode();
    if (insertExtraNode && this.extraNode && node.contains(this.extraNode)) {
      node.removeChild(this.extraNode);
    }
    TransitionEvents.removeStartEventListener(node, this.onTransitionStart);
    TransitionEvents.removeEndEventListener(node, this.onTransitionEnd);
  }

});

  afterEach(() => {
    try {
      ReactDOM.unmountComponentAtNode(container);
    } catch (e) {
      console.log(e);
      container.innerHTML = '';
    }
  });

  it('create works', () => {
    expect(TestUtils.scryRenderedDOMComponentsWithClass(list, 'item').length).to.be(4);
  });

  if (!CssAnimation.isCssAnimationSupported) {
    return;
  }

  it('transitionLeave works', function t2(done) {
    this.timeout(5999);
    list.handleRemove(0);
    setTimeout(() => {
      expect(TestUtils.scryRenderedDOMComponentsWithClass(list, 'item').length).to.be(4);
      if (!window.callPhantom) {
        expect(TestUtils.scryRenderedDOMComponentsWithClass(list, 'item')[0].className)
          .to.contain('example-leave');
        expect(TestUtils.scryRenderedDOMComponentsWithClass(list, 'item')[0].className)
          .to.contain('example-leave-active');
      }
    }, 100);
    setTimeout(() => {

render() {
      return (
        
          {options.remove &amp;&amp; !this.state.transitionEnter ? null : <div>child element</div>}
        
      );
    }
  };
}

if (CssAnimation.isCssAnimationSupported) {
  single(createClass, 'transition');
}

function animate(node: HTMLElement, show: boolean, done: () => void) {
  let height: number;
  let requestAnimationFrameId: number;
  return cssAnimation(node, 'fishd-motion-collapse', {
    start() {
      if (!show) {
        node.style.height = `${node.offsetHeight}px`;
        node.style.opacity = '1';
      } else {
        height = node.offsetHeight;
        node.style.height = '0px';
        node.style.opacity = '0';
      }
    },
    active() {
      if (requestAnimationFrameId) {
        raf.cancel(requestAnimationFrameId);
      }
      requestAnimationFrameId = raf(() => {
        node.style.height = `${show ? height : 0}px`;

toggle(node, show, done) {
    const { opacity } = this.props;
    const nodeNew = node;
    cssAnim(nodeNew, `__css-animation__${prefixClass('mask')}`, {
      start() {
        if (show) {
          nodeNew.style.opacity = 0;
        }
      },
      active() {
        nodeNew.style.opacity = show ? opacity : 0;
      },
      end() {
        done();
      },
    });
  }

function animate(node: HTMLElement, show: boolean, done: () => void) {
  let height: number;
  let requestAnimationFrameId: number;
  return cssAnimation(node, 'collapse', {
    start() {
      if (!show) {
        node.style.height = `${node.offsetHeight}px`;
        node.style.opacity = '1';
      } else {
        height = node.offsetHeight;
        node.style.height = '0px';
        node.style.opacity = '0';
      }
    },
    active() {
      if (requestAnimationFrameId) {
        raf.cancel(requestAnimationFrameId);
      }
      requestAnimationFrameId = raf(() => {
        node.style.height = `${show ? height : 0}px`;

const props = this.props;
    const transitionName = props.transitionName;
    const nameIsObj = typeof transitionName === 'object';
    this.stop();
    const end = () => {
      this.stopper = null;
      finishCallback();
    };
    if ((isCssAnimationSupported || !props.animation[animationType]) &&
      transitionName && props[transitionMap[animationType]]) {
      const name = nameIsObj ? transitionName[animationType] : `${transitionName}-${animationType}`;
      let activeName = `${name}-active`;
      if (nameIsObj && transitionName[`${animationType}Active`]) {
        activeName = transitionName[`${animationType}Active`];
      }
      this.stopper = cssAnimate(node, {
        name,
        active: activeName,
      }, end);
    } else {
      this.stopper = props.animation[animationType](node, end);
    }
  }

const toggleHeightAnim = (node, show, done) => {
  let height;
  cssAni(node, '__css-animation__', {
    start() {
      node.style.overflow = 'hidden';
      if (!show) {
        node.style.height = `${node.offsetHeight}px`;
        node.style.opacity = 0;
      } else {
        height = node.offsetHeight;
        node.style.height = 0;
        node.style.opacity = 1;
      }
    },
    active() {
      node.style.height = `${show ? height : 0}px`;
    },
    end() {
      node.style.height = '';

function animate (node, show, done) {
  let height
  return cssAnimation(node, 'NEUI-collapse', {
    start () {
      if (!show) {
        node.style.height = `${node.offsetHeight}px`
      } else {
        height = node.offsetHeight
        node.style.height = 0
      }
    },
    active () {
      node.style.height = `${show ? height : 0}px`
    },
    end () {
      node.style.height = ''
      done()
    }
  })