# Animation

import * as React from 'react'
import * as ReactDOM from 'react-dom'
import Animation from '../index'
import Button from '../../button'
import './style.less'

class Example extends React.Component {
  state = {
    fadeIn: true
  }

  toggle = type => {
    this.setState({ [type]: !this.state[type] })
  }

  render() {
    const { fadeIn } = this.state
    return (
      <div>
        <h2>animation fade</h2>
        <Button
          type="default"
          onClick={this.toggle.bind(this, 'fadeIn')}
          style={{ width: 100 }}
        >
          toggle
        </Button>
        <div className="demo-wrap">
          <Animation in={fadeIn} classNames="fade-animation">
            {
              <div className="demo">
                fade-
                {fadeIn ? 'in' : 'out'}
              </div>
            }
          </Animation>
        </div>
      </div>
    )
  }
}

import * as React from 'react'
import * as ReactDOM from 'react-dom'
import Animation from '../index'
import Button from '../../button'
import './style.less'

class Example extends React.Component {
  state = {
    slideIn: true
  }

  toggle = type => {
    this.setState({ [type]: !this.state[type] })
  }

  render() {
    const { slideIn } = this.state
    return (
      <div>
        <h2>animation slide</h2>
        <Button
          type="default"
          onClick={this.toggle.bind(this, 'slideIn')}
          style={{ width: 100 }}
        >
          toggle
        </Button>
        <div className="demo-wrap">
          <Animation in={slideIn} classNames="slide-animation">
            {
              <div className="demo slide">
                slide-
                {slideIn ? 'in' : 'out'}
              </div>
            }
          </Animation>
        </div>
      </div>
    )
  }
}

import * as React from 'react'
import * as ReactDOM from 'react-dom'
import Animation from '../index'
import Button from '../../button'
import './style.less'

class Example extends React.Component {
  state = {
    zoomIn: true
  }

  toggle = type => {
    this.setState({ [type]: !this.state[type] })
  }

  render() {
    const { zoomIn } = this.state
    return (
      <div>
        <h2>animation zoom</h2>
        <Button
          type="default"
          onClick={this.toggle.bind(this, 'zoomIn')}
          style={{ width: 100 }}
        >
          toggle
        </Button>
        <div className="demo-wrap">
          <div className="zoom__wrap">
            <Animation in={zoomIn} classNames="zoom-animation">
              {
                <div className="demo zoom">
                  zoom-
                  {zoomIn ? 'in' : 'out'}
                </div>
              }
            </Animation>
          </div>
        </div>
      </div>
    )
  }
}