# Animate

动画组件

## basic use

```js
import { Animate } from 'amos-framework';

<Animate
  key="animate-demo"
  transitionName="zoom"
  showProp="data-show"
  component=""
  transitionAppear
>
  <div data-show={visible}>我是内容区</div>
</Animate>
```

## 案例演示

### Animate 基本使用

---demo
```js
import { Button, Animate, Select } from 'amos-framework';

const styles = {
  view: {
    height: '10em',
    display: 'flex',
    alignItems: 'center'
  },
  sandbox: {
    border: '1px solid #eee',
    padding: '1em',
    width: '20em',
    height: '10em'
  },
  control: {
    marginLeft: '1em'
  },
  anim: {
    padding: '2em',
    background: '#eee',
    borderRadius: '10px',
    color: '#333'
  }
};

const AnimContent = ({ animateName, visible }) => {
  return (
    <div style={styles.anim}>
      <div>动画名称: {animateName}</div>
      <div>动画元素</div>
    </div>
  );
};

const anims = [
  'fade', 'fade-down', 'fade-left', 'fade-up', 'fade-right',
  'zoom', 'zoom-big', 'zoom-big-fast', 'zoom-up', 'zoom-down', 'zoom-left', 'zoom-right',
  'zoom-spring-back', 'zoom-shrink', 'zoom-expand', 'zoom-comb-down', 'zoom-comb-up',
  'zoom-comb-left', 'zoom-comb-right', 'zoom-tl', 'zoom-tr', 'zoom-bl', 'zoom-br',
  'swing', 'slide-up', 'slide-down', 'slide-left', 'slide-right',
  'move-up', 'move-down', 'move-left', 'move-right',
  'drop-left', 'drop-right',
  'hinge-flip', 'flip-x', 'flip-y',
  'plop', 'plop-down', 'plop-up',
  'stamp', 'stamp-swing', 'speed',
  'swap', 'space-down', 'space-left', 'space-right', 'space-up',
  'e-foolish', 'e-hole', 'e-swash', 'e-bomb-left',
  'e-bomb-right', 'e-tint-down', 'e-tint-left',
  'e-tint-right', 'e-tint-up'
];

class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      animateName: 'fade',
      visible: true
    };
  }

  onChange = value => {
    this.setState({
      animateName: value
    });
  };

  toggleAnimate = () => {
    this.setState(prevState => {
      return {
        visible: !prevState.visible
      };
    });
  };

  render() {
    const { animateName, visible } = this.state;
    const text = visible ? '离开' : '进入';
    return (
      <div style={styles.view}>
        <div style={styles.sandbox}>
          <Animate key="animate-demo" transitionName={animateName} showProp="visible" component="" transitionAppear>
            {visible ? <AnimContent animateName={animateName} visible={visible} /> : null}
          </Animate>
        </div>
        <div style={styles.control}>
          动画类型：
          <Select
            style={{ width: '15em' }}
            data={anims}
            value={animateName}
            renderOption={item => <Select.Option value={item}>{item}</Select.Option>}
            onChange={this.onChange}
          />
          <Button color="orange" onClick={this.toggleAnimate} style={{ height: '2.5em', width: '8em' }}>{text}</Button>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

### Animate 使用 AnimateAddonBox

---demo
```js
import { Button, Animate, Select } from 'amos-framework';

const AnimateAddonBox = Animate.AnimateAddonBox;

const styles = {
  view: {
    height: '10em',
    display: 'flex',
    alignItems: 'center'
  },
  sandbox: {
    border: '1px solid #eee',
    padding: '1em',
    width: '20em',
    height: '10em'
  },
  control: {
    marginLeft: '1em'
  },
  anim: {
    padding: '2em',
    background: '#eee',
    borderRadius: '10px',
    color: '#333'
  }
};

const anims = [
  'fade', 'fade-down', 'fade-left', 'fade-up', 'fade-right',
  'zoom', 'zoom-big', 'zoom-big-fast', 'zoom-up', 'zoom-down', 'zoom-left', 'zoom-right',
  'zoom-spring-back', 'zoom-shrink', 'zoom-expand', 'zoom-comb-down', 'zoom-comb-up',
  'zoom-comb-left', 'zoom-comb-right', 'zoom-tl', 'zoom-tr', 'zoom-bl', 'zoom-br',
  'swing', 'slide-up', 'slide-down', 'slide-left', 'slide-right',
  'move-up', 'move-down', 'move-left', 'move-right',
  'drop-left', 'drop-right',
  'hinge-flip', 'flip-x', 'flip-y',
  'plop', 'plop-down', 'plop-up',
  'stamp', 'stamp-swing', 'speed',
  'swap', 'space-down', 'space-left', 'space-right', 'space-up',
  'e-foolish', 'e-hole', 'e-swash', 'e-bomb-left',
  'e-bomb-right', 'e-tint-down', 'e-tint-left',
  'e-tint-right', 'e-tint-up'
];

class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      animateName: 'fade',
      visible: true
    };
  }

  onChange = value => {
    this.setState({
      animateName: value
    });
  };

  toggleAnimate = () => {
    this.setState(prevState => {
      return {
        visible: !prevState.visible
      };
    });
  };

  render() {
    const { animateName, visible } = this.state;
    const text = visible ? '离开' : '进入';
    const content = (
      <AnimateAddonBox toggle={visible}>
        <div style={styles.anim}>
          <div>动画名称: {animateName}</div>
          <div>动画元素</div>
        </div>
      </AnimateAddonBox>
    );
    return (
      <div style={styles.view}>
        <div style={styles.sandbox}>
          <Animate key="animate-demo1" transitionName={animateName} showProp="toggle" transitionAppear>
            {visible ? content : null}
          </Animate>
        </div>
        <div style={styles.control}>
          动画类型：
          <Select
            style={{ width: '15em' }}
            data={anims}
            value={animateName}
            renderOption={item => <Select.Option value={item}>{item}</Select.Option>}
            onChange={this.onChange}
          />
          <Button color="orange" onClick={this.toggleAnimate} style={{ height: '2.5em', width: '8em' }}>{text}</Button>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

## props

|name|type|default|description|
|------|------|------|-------|
| component | `React.Element、string` | `''` | wrap dom node or component for children. set to '' if you do not wrap for only one child |
| componentProps | object | `{}` | extra props that will be passed to component |
| showProp | string | -- | using prop for show and hide |
| exclusive | boolean | -- | whether allow only one set of animations(enter and leave) at the same time.  |
| transitionName | `string、object` [transitionName](#系统提供的动画) | -- | specify corresponding css, see ReactCSSTransitionGroup |
| transitionAppear | boolean | false | whether support transition appear anim |
| transitionEnter | boolean | true | whether support transition enter anim |
| transitionLeave | boolean | true | whether support transition leave anim |
| onEnd | `function(key:String, exists:Boolean)` | true | animation end callback |
| animation | `object` | `{}` | to animate with js. see animation format below. |

## 系统提供的动画

```js
// 'fade', 'fade-down', 'fade-left', 'fade-up', 'fade-right',
// 'zoom', 'zoom-big', 'zoom-big-fast', 'zoom-up', 'zoom-down', 'zoom-left', 'zoom-right',
// 'zoom-spring-back', 'zoom-shrink', 'zoom-expand', 'zoom-comb-down', 'zoom-comb-up',
// 'zoom-comb-left', 'zoom-comb-right', 'zoom-tl', 'zoom-tr', 'zoom-bl', 'zoom-br',
// 'swing', 'slide-up', 'slide-down', 'slide-left', 'slide-right',
// 'move-up', 'move-down', 'move-left', 'move-right',
// 'drop-left', 'drop-right',
// 'hinge-flip', 'flip-x', 'flip-y',
// 'plop', 'plop-down', 'plop-up',
// 'stamp', 'stamp-swing', 'speed',
// 'swap', 'space-down', 'space-left', 'space-right', 'space-up',
// 'e-foolish', 'e-hole', 'e-swash', 'e-bomb-left',
// 'e-bomb-right', 'e-tint-down', 'e-tint-left',
// 'e-tint-right', 'e-tint-up'
```

## 使用 AnimateAddonBox

直接children是原始 html 内容时，不采用形如 `data-show` 的方式时使用，需要传递 toggle 属性。

```js
import { Animate } from 'amos-framework';

const AnimateAddonBox = Animate.AnimateAddonBox;

<Animate
  key="animate-demo"
  transitionName="zoom"
  showProp="toggle"
  component=""
  transitionAppear
>
  <AnimateAddonBox toggle={visible}>
    <div>我是内容区</div>
  </AnimateAddonBox>
</Animate>

```