ant-design/components/motion/demo/basic.html

<div class="code-box" id="code-box-components-motion-demo-basic">
  <div class="code-box-demo">
    <div id="components-motion-demo-basic"></div>
    <script>(function(){'use strict';

var cssAnimation = require('css-animation');
var motions = [];
motions = motions.concat([[{
  name: '淡入',
  value: 'fade',
  direction: 'enter',
  type: '渐隐'
}, {
  name: '淡出',
  value: 'fade',
  direction: 'leave',
  type: '渐隐'
}]]);
motions = motions.concat([[{
  name: '中心放大',
  value: 'zoom',
  direction: 'enter',
  type: '缩放'
}, {
  name: '中心缩小',
  value: 'zoom',
  direction: 'leave',
  type: '缩放'
}, {
  name: '上方放大',
  value: 'zoom-up',
  direction: 'enter',
  type: '缩放'
}, {
  name: '上方缩小',
  value: 'zoom-up',
  direction: 'leave',
  type: '缩放'
}, {
  name: '下方放大',
  value: 'zoom-down',
  direction: 'enter',
  type: '缩放'
}, {
  name: '下方缩小',
  value: 'zoom-down',
  direction: 'leave',
  type: '缩放'
}, {
  name: '左方放大',
  value: 'zoom-left',
  direction: 'enter',
  type: '缩放'
}, {
  name: '左方缩小',
  value: 'zoom-left',
  direction: 'leave',
  type: '缩放'
}, {
  name: '右方放大',
  value: 'zoom-right',
  direction: 'enter',
  type: '缩放'
}, {
  name: '右方缩小',
  value: 'zoom-right',
  direction: 'leave',
  type: '缩放'
}]]);
motions = motions.concat([[{
  name: '上方滑入',
  value: 'move-up',
  direction: 'enter',
  type: '移动'
}, {
  name: '上方滑出',
  value: 'move-up',
  direction: 'leave',
  type: '移动'
}, {
  name: '下方滑入',
  value: 'move-down',
  direction: 'enter',
  type: '移动'
}, {
  name: '下方滑出',
  value: 'move-down',
  direction: 'leave',
  type: '移动'
}, {
  name: '左方滑入',
  value: 'move-left',
  direction: 'enter',
  type: '移动'
}, {
  name: '左方滑出',
  value: 'move-left',
  direction: 'leave',
  type: '移动'
}, {
  name: '右方滑入',
  value: 'move-right',
  direction: 'enter',
  type: '移动'
}, {
  name: '右方滑入',
  value: 'move-right',
  direction: 'leave',
  type: '移动'
}]]);
motions = motions.concat([[{
  name: '上方展开',
  value: 'slide-up',
  direction: 'enter',
  type: '伸缩'
}, {
  name: '上方缩回',
  value: 'slide-up',
  direction: 'leave',
  type: '伸缩'
}, {
  name: '下方展开',
  value: 'slide-down',
  direction: 'enter',
  type: '伸缩'
}, {
  name: '下方缩回',
  value: 'slide-down',
  direction: 'leave',
  type: '伸缩'
}, {
  name: '左方展开',
  value: 'slide-left',
  direction: 'enter',
  type: '伸缩'
}, {
  name: '左方缩回',
  value: 'slide-left',
  direction: 'leave',
  type: '伸缩'
}, {
  name: '右方展开',
  value: 'slide-right',
  direction: 'enter',
  type: '伸缩'
}, {
  name: '右方缩回',
  value: 'slide-right',
  direction: 'leave',
  type: '伸缩'
}]]);
motions = motions.concat([[{
  name: '摇摆',
  value: 'swing',
  direction: 'enter',
  type: '其他'
}]]);
var leave = '-leave';
var Test = React.createClass({
  displayName: 'Test',

  handleChange: function handleChange(e) {
    var _this = this;

    var value = e.target.value;
    if (value) {
      this.demoNode.style.visibility = '';
      cssAnimation(this.demoNode, value, function () {
        if (value.slice(-leave.length) === leave) {
          _this.demoNode.style.visibility = 'hidden';
        }
      });
    }
  },

  componentDidMount: function componentDidMount() {
    this.demoNode = React.findDOMNode(this.refs.demo);
  },

  render: function render() {
    var options = [React.createElement(
      'option',
      { value: "" },
      '请选择预设动画'
    )].concat(motions.map(function (m) {
      var opts = m.map(function (m2) {
        return React.createElement(
          'option',
          { value: m2.value + "-" + m2.direction },
          m2.name + " " + m2.value
        );
      });
      return React.createElement(
        'optgroup',
        { label: m[0].type },
        opts
      );
    }));
    return React.createElement(
      'div',
      null,
      React.createElement(
        'div',
        { className: "motion-container" },
        React.createElement(
          'div',
          { ref: "demo", className: "motion-example" },
          '栗子'
        )
      ),
      React.createElement(
        'div',
        { className: "motion-select" },
        React.createElement(
          'select',
          { onChange: this.handleChange },
          options
        )
      )
    );
  }
});

React.render(React.createElement(Test, null), document.getElementById('components-motion-demo-basic'));})()</script><div class="highlight"><pre><code class="javascript"><span class="keyword">var</span> cssAnimation = require(<span class="string">'css-animation'</span>);
<span class="keyword">var</span> motions = [];
motions = motions.concat([[{
  name: <span class="string">'淡入'</span>,
  value: <span class="string">'fade'</span>,
  direction: <span class="string">'enter'</span>,
  type: <span class="string">'渐隐'</span>
}, {
  name: <span class="string">'淡出'</span>,
  value: <span class="string">'fade'</span>,
  direction: <span class="string">'leave'</span>,
  type: <span class="string">'渐隐'</span>
}]]);
motions = motions.concat([[{
  name: <span class="string">'中心放大'</span>,
  value: <span class="string">'zoom'</span>,
  direction: <span class="string">'enter'</span>,
  type: <span class="string">'缩放'</span>
}, {
  name: <span class="string">'中心缩小'</span>,
  value: <span class="string">'zoom'</span>,
  direction: <span class="string">'leave'</span>,
  type: <span class="string">'缩放'</span>
}, {
  name: <span class="string">'上方放大'</span>,
  value: <span class="string">'zoom-up'</span>,
  direction: <span class="string">'enter'</span>,
  type: <span class="string">'缩放'</span>
}, {
  name: <span class="string">'上方缩小'</span>,
  value: <span class="string">'zoom-up'</span>,
  direction: <span class="string">'leave'</span>,
  type: <span class="string">'缩放'</span>
}, {
  name: <span class="string">'下方放大'</span>,
  value: <span class="string">'zoom-down'</span>,
  direction: <span class="string">'enter'</span>,
  type: <span class="string">'缩放'</span>
}, {
  name: <span class="string">'下方缩小'</span>,
  value: <span class="string">'zoom-down'</span>,
  direction: <span class="string">'leave'</span>,
  type: <span class="string">'缩放'</span>
}, {
  name: <span class="string">'左方放大'</span>,
  value: <span class="string">'zoom-left'</span>,
  direction: <span class="string">'enter'</span>,
  type: <span class="string">'缩放'</span>
}, {
  name: <span class="string">'左方缩小'</span>,
  value: <span class="string">'zoom-left'</span>,
  direction: <span class="string">'leave'</span>,
  type: <span class="string">'缩放'</span>
}, {
  name: <span class="string">'右方放大'</span>,
  value: <span class="string">'zoom-right'</span>,
  direction: <span class="string">'enter'</span>,
  type: <span class="string">'缩放'</span>
}, {
  name: <span class="string">'右方缩小'</span>,
  value: <span class="string">'zoom-right'</span>,
  direction: <span class="string">'leave'</span>,
  type: <span class="string">'缩放'</span>
}]]);
motions = motions.concat([[{
  name: <span class="string">'上方滑入'</span>,
  value: <span class="string">'move-up'</span>,
  direction: <span class="string">'enter'</span>,
  type: <span class="string">'移动'</span>
}, {
  name: <span class="string">'上方滑出'</span>,
  value: <span class="string">'move-up'</span>,
  direction: <span class="string">'leave'</span>,
  type: <span class="string">'移动'</span>
}, {
  name: <span class="string">'下方滑入'</span>,
  value: <span class="string">'move-down'</span>,
  direction: <span class="string">'enter'</span>,
  type: <span class="string">'移动'</span>
}, {
  name: <span class="string">'下方滑出'</span>,
  value: <span class="string">'move-down'</span>,
  direction: <span class="string">'leave'</span>,
  type: <span class="string">'移动'</span>
}, {
  name: <span class="string">'左方滑入'</span>,
  value: <span class="string">'move-left'</span>,
  direction: <span class="string">'enter'</span>,
  type: <span class="string">'移动'</span>
}, {
  name: <span class="string">'左方滑出'</span>,
  value: <span class="string">'move-left'</span>,
  direction: <span class="string">'leave'</span>,
  type: <span class="string">'移动'</span>
}, {
  name: <span class="string">'右方滑入'</span>,
  value: <span class="string">'move-right'</span>,
  direction: <span class="string">'enter'</span>,
  type: <span class="string">'移动'</span>
}, {
  name: <span class="string">'右方滑入'</span>,
  value: <span class="string">'move-right'</span>,
  direction: <span class="string">'leave'</span>,
  type: <span class="string">'移动'</span>
}]]);
motions = motions.concat([[{
  name: <span class="string">'上方展开'</span>,
  value: <span class="string">'slide-up'</span>,
  direction: <span class="string">'enter'</span>,
  type: <span class="string">'伸缩'</span>
}, {
  name: <span class="string">'上方缩回'</span>,
  value: <span class="string">'slide-up'</span>,
  direction: <span class="string">'leave'</span>,
  type: <span class="string">'伸缩'</span>
}, {
  name: <span class="string">'下方展开'</span>,
  value: <span class="string">'slide-down'</span>,
  direction: <span class="string">'enter'</span>,
  type: <span class="string">'伸缩'</span>
}, {
  name: <span class="string">'下方缩回'</span>,
  value: <span class="string">'slide-down'</span>,
  direction: <span class="string">'leave'</span>,
  type: <span class="string">'伸缩'</span>
}, {
  name: <span class="string">'左方展开'</span>,
  value: <span class="string">'slide-left'</span>,
  direction: <span class="string">'enter'</span>,
  type: <span class="string">'伸缩'</span>
}, {
  name: <span class="string">'左方缩回'</span>,
  value: <span class="string">'slide-left'</span>,
  direction: <span class="string">'leave'</span>,
  type: <span class="string">'伸缩'</span>
}, {
  name: <span class="string">'右方展开'</span>,
  value: <span class="string">'slide-right'</span>,
  direction: <span class="string">'enter'</span>,
  type: <span class="string">'伸缩'</span>
}, {
  name: <span class="string">'右方缩回'</span>,
  value: <span class="string">'slide-right'</span>,
  direction: <span class="string">'leave'</span>,
  type: <span class="string">'伸缩'</span>
}]]);
motions = motions.concat([[{
  name: <span class="string">'摇摆'</span>,
  value: <span class="string">'swing'</span>,
  direction: <span class="string">'enter'</span>,
  type: <span class="string">'其他'</span>
}]]);
<span class="keyword">var</span> leave=<span class="string">'-leave'</span>;
<span class="keyword">var</span> Test = React.createClass({
  handleChange(e) {
    <span class="keyword">var</span> value = e.target.value;
    <span class="keyword">if</span>(value){
      <span class="keyword">this</span>.demoNode.style.visibility=<span class="string">''</span>;
      cssAnimation(<span class="keyword">this</span>.demoNode, value, () =&gt; {
        <span class="keyword">if</span>(value.slice(-leave.length)===leave){
          <span class="keyword">this</span>.demoNode.style.visibility=<span class="string">'hidden'</span>;
        }
      });
    }
  },

  componentDidMount() {
    <span class="keyword">this</span>.demoNode = React.findDOMNode(<span class="keyword">this</span>.refs.demo);
  },

  render() {
    <span class="keyword">var</span> options = [<span class="xml"><span class="tag">&lt;<span class="title">option</span> <span class="attribute">value</span>=<span class="value">""</span>&gt;</span>请选择预设动画<span class="tag">&lt;/<span class="title">option</span>&gt;</span>].concat(motions.map(function (m) {
      var opts = m.map(function (m2) {
        return <span class="tag">&lt;<span class="title">option</span> <span class="attribute">value</span>=<span class="value">{m2.value</span> + "<span class="attribute">-</span>" + <span class="attribute">m2.direction</span>}&gt;</span>{m2.name + " " + m2.value}<span class="tag">&lt;/<span class="title">option</span>&gt;</span>
      });
      return <span class="tag">&lt;<span class="title">optgroup</span> <span class="attribute">label</span>=<span class="value">{m[0].type}</span>&gt;</span>{opts}<span class="tag">&lt;/<span class="title">optgroup</span>&gt;</span>;</span>
    }));
    <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="title">div</span>&gt;</span>
      <span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"motion-container"</span>&gt;</span>
        <span class="tag">&lt;<span class="title">div</span> <span class="attribute">ref</span>=<span class="value">"demo"</span> <span class="attribute">className</span>=<span class="value">"motion-example"</span>&gt;</span>栗子<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
      <span class="tag">&lt;/<span class="title">div</span>&gt;</span>
      <span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"motion-select"</span>&gt;</span>
        <span class="tag">&lt;<span class="title">select</span> <span class="attribute">onChange</span>=<span class="value">{this.handleChange}</span>&gt;</span>{options}<span class="tag">&lt;/<span class="title">select</span>&gt;</span>
      <span class="tag">&lt;/<span class="title">div</span>&gt;</span>
    <span class="tag">&lt;/<span class="title">div</span>&gt;</span>;</span>
  }
});

React.render(<span class="xml"><span class="tag">&lt;<span class="title">Test</span>/&gt;</span>, document.getElementById('components-motion-demo-basic'));</span></code></pre></div><style>
.motion-container {
  height: 150px;
  line-height: 150px;
  text-align: center;
  margin-bottom: 20px;
}
.motion-example {
  background: #4AAFDE;
  width: 140px;
  height: 140px;
  line-height: 140px;
  font-size: 18px;
  color: #fff;
  text-align: center;
  display: inline-block !important;
  border-radius: 8px;
  font-weight: bold;
}
.motion-select {
  text-align: center;
}
</style>

  </div>
  <div class="code-box-meta markdown">
    <div class="code-box-title">
      <a href="#code-box-components-motion-demo-basic">基本</a>
    </div>
    <p>动画效果示例。</p>
    <span class="collapse anticon anticon-circle-o-right"></span>
  </div>
</div>