uxcore.js - React UI Component Set

组件演示

[{"title":"基本使用","id":"components-animate-demo-basic","tags":[],"filepath":"site/components/animate/demo/basic.md","directory":"components/animate/demo","filename":"basic","meta":{"title":"基本使用","description":"\n默认提供的动画样式，只有入场动画。\n","order":"0","filepath":"site/components/animate/demo/basic.md","filename":"basic","directory":"components/animate/demo","id":"components-animate-demo-basic","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar Option = _uxcore.Select.Option;\n\nvar AwesomeComponent = function (_React$Component) {\n _inherits(AwesomeComponent, _React$Component);\n\n function AwesomeComponent(props) {\n _classCallCheck(this, AwesomeComponent);\n\n return _possibleConstructorReturn(this, (AwesomeComponent.__proto__ || Object.getPrototypeOf(AwesomeComponent)).call(this, props));\n }\n\n _createClass(AwesomeComponent, [{\n key: 'render',\n value: function render() {\n return React.createElement(\n 'div',\n { style: { display: this.props.visible ? 'inline-block' : 'none' }, className: 'awesome-component-wrap bg-primary-color' },\n '\\u52A8\\u753B\\u5C55\\u793A\\u533A\\u57DF'\n );\n }\n }]);\n\n return AwesomeComponent;\n}(React.Component);\n\nvar Demo = function (_React$Component2) {\n _inherits(Demo, _React$Component2);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this2 = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this2.state = {\n visible: true,\n effect: 'fade'\n };\n return _this2;\n }\n\n _createClass(Demo, [{\n key: 'showComponent',\n value: function showComponent() {\n this.setState({\n visible: !this.state.visible\n });\n }\n }, {\n key: 'handleChange',\n value: function handleChange(value) {\n this.setState({\n effect: value\n });\n }\n }, {\n key: 'render',\n value: function render() {\n var effects = ['fade', 'slideRight', 'slideDown', 'newspaper', 'fall', 'threeFallH', 'threeFallV', 'threeSign', 'superScale', 'threeSlit', 'threeRotateBottom', 'threeRotateLeft'];\n return React.createElement(\n 'div',\n null,\n React.createElement(\n 'div',\n { style: { height: '60px' } },\n React.createElement(\n _uxcore.Animate,\n { showProp: 'visible', transitionName: this.state.effect, transitionAppear: true },\n React.createElement(AwesomeComponent, { visible: this.state.visible })\n )\n ),\n React.createElement(\n 'div',\n { style: { padding: '10px 0px' } },\n React.createElement(\n _uxcore.Select,\n { style: { width: '200px' }, placeholder: '\\u5207\\u6362\\u52A8\\u753B\\u6548\\u679C', onChange: this.handleChange.bind(this), value: this.state.effect },\n effects.map(function (item) {\n return React.createElement(\n Option,\n { key: item },\n item\n );\n })\n ),\n React.createElement(\n _uxcore.Button,\n { type: 'outline', onClick: this.showComponent.bind(this), style: { marginLeft: '10px' } },\n '\\u663E\\u793A/\\u9690\\u85CF'\n )\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-animate-demo-basic'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">\nimport { Button } from 'uxcore';\nimport { Animate } from 'uxcore';\nimport { Select } from 'uxcore';\nconst { Option } = Select;\n\nclass AwesomeComponent extends React.Component {\n constructor(props) {\n super(props);\n }\n render() {\n return (\n <div style={{ display: this.props.visible ? 'inline-block' : 'none' }} className=\"awesome-component-wrap bg-primary-color\">\n 动画展示区域\n </div>\n );\n }\n}\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n visible: true,\n effect: 'fade',\n };\n }\n\n showComponent() {\n this.setState({\n visible: !this.state.visible,\n });\n }\n\n handleChange(value) {\n this.setState({\n effect: value,\n });\n }\n\n render() {\n const effects = ['fade', 'slideRight', 'slideDown', 'newspaper', 'fall', 'threeFallH', 'threeFallV', 'threeSign', 'superScale', 'threeSlit', 'threeRotateBottom', 'threeRotateLeft'];\n return (\n <div>\n <div style={{ height: '60px' }}>\n <Animate showProp=\"visible\" transitionName={this.state.effect} transitionAppear>\n <AwesomeComponent visible={this.state.visible} />\n </Animate>\n </div>\n <div style={{ padding: '10px 0px' }}>\n <Select style={{ width: '200px' }} placeholder=\"切换动画效果\" onChange={this.handleChange.bind(this)} value={this.state.effect}>\n {effects.map(item => <Option key={item}>{item}</Option>)}\n </Select>\n <Button type=\"outline\" onClick={this.showComponent.bind(this)} style={{ marginLeft: '10px' }}>显示/隐藏</Button>\n </div>\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-animate-demo-basic'));</code></pre></div><style type=\"text/css\">.awesome-component-wrap {\n color: white;\n line-height: 40px;\n padding: 10px 20px;\n border-radius: 10px;\n font-size: 16px;\n}</style><div class=\"highlight\"><pre><code class=\"css\">.awesome-component-wrap {\n color: white;\n line-height: 40px;\n padding: 10px 20px;\n border-radius: 10px;\n font-size: 16px;\n}</code></pre></div>"},"status":"public","toc":""},{"title":"定制动画","id":"components-animate-demo-custom","tags":[],"filepath":"site/components/animate/demo/custom.md","directory":"components/animate/demo","filename":"custom","meta":{"title":"定制动画","description":"\n默认提供的动画样式，只有入场动画。\n","order":"1","filepath":"site/components/animate/demo/custom.md","filename":"custom","directory":"components/animate/demo","id":"components-animate-demo-custom","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar Option = _uxcore.Select.Option;\n\nvar AwesomeComponent = function (_React$Component) {\n _inherits(AwesomeComponent, _React$Component);\n\n function AwesomeComponent(props) {\n _classCallCheck(this, AwesomeComponent);\n\n return _possibleConstructorReturn(this, (AwesomeComponent.__proto__ || Object.getPrototypeOf(AwesomeComponent)).call(this, props));\n }\n\n _createClass(AwesomeComponent, [{\n key: 'render',\n value: function render() {\n return React.createElement(\n 'div',\n { style: { display: this.props.visible ? 'inline-block' : 'none' }, className: 'awesome-component-wrap bg-primary-color' },\n '\\u52A8\\u753B\\u5C55\\u793A\\u533A\\u57DF'\n );\n }\n }]);\n\n return AwesomeComponent;\n}(React.Component);\n\nvar Demo = function (_React$Component2) {\n _inherits(Demo, _React$Component2);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this2 = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this2.state = {\n visible: true\n };\n return _this2;\n }\n\n _createClass(Demo, [{\n key: 'showComponent',\n value: function showComponent() {\n this.setState({\n visible: !this.state.visible\n });\n }\n }, {\n key: 'render',\n value: function render() {\n return React.createElement(\n 'div',\n null,\n React.createElement(\n 'div',\n { style: { height: '60px' } },\n React.createElement(\n _uxcore.Animate,\n { showProp: 'visible', transitionName: 'custom', transitionAppear: true, onEnd: function onEnd(key, exists) {\n console.log(key, exists);\n }\n },\n React.createElement(AwesomeComponent, { key: 'awesome', visible: this.state.visible })\n )\n ),\n React.createElement(\n 'div',\n { style: { padding: '10px 0px' } },\n React.createElement(\n _uxcore.Button,\n { type: 'outline', onClick: this.showComponent.bind(this), style: { marginLeft: '10px' } },\n '\\u663E\\u793A/\\u9690\\u85CF'\n )\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-animate-demo-custom'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">\nimport { Button } from 'uxcore';\nimport { Animate } from 'uxcore';\nimport { Select } from 'uxcore';\nconst { Option } = Select;\n\nclass AwesomeComponent extends React.Component {\n constructor(props) {\n super(props);\n }\n render() {\n return (\n <div style={{ display: this.props.visible ? 'inline-block' : 'none' }} className=\"awesome-component-wrap bg-primary-color\">\n 动画展示区域\n </div>\n );\n }\n}\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n visible: true,\n };\n }\n\n showComponent() {\n this.setState({\n visible: !this.state.visible,\n });\n }\n\n render() {\n return (\n <div>\n <div style={{ height: '60px' }}>\n <Animate showProp=\"visible\" transitionName={'custom'} transitionAppear onEnd={(key, exists) => {\n console.log(key, exists);\n }}\n >\n <AwesomeComponent key=\"awesome\" visible={this.state.visible} />\n </Animate>\n </div>\n <div style={{ padding: '10px 0px' }}>\n <Button type=\"outline\" onClick={this.showComponent.bind(this)} style={{ marginLeft: '10px' }}>显示/隐藏</Button>\n </div>\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-animate-demo-custom'));</code></pre></div><style type=\"text/css\">.awesome-component-wrap {\n color: white;\n line-height: 40px;\n padding: 10px 20px;\n border-radius: 10px;\n font-size: 16px;\n}\n\n@keyframes flipIn {\n 0% {\n opacity: 0;\n transform: perspective(1000px) rotate3d(1,0,0,45deg);\n }\n 100% {\n opacity: 1;\n transform: perspective(1000px) rotate3d(1,0,0,0deg);\n }\n}\n\n@keyframes flipOut {\n 0% {\n opacity: 1;\n transform: perspective(1000px) rotate3d(1,0,0,0deg);\n }\n 100% {\n opacity: 0;\n transform: perspective(1000px) rotate3d(1,0,0,45deg);\n }\n}\n\n.custom-enter,\n.custom-appear {\n opacity: 0;\n transform: perspective(1000px) rotate3d(1,0,0,45deg);\n transform-origin: 50% calc(100% + 10px);\n animation-duration: 1s;\n animation-fill-mode: both;\n}\n.custom-enter-active,\n.custom-appear-active {\n animation-name: flipIn;\n}\n\n.custom-leave {\n opacity: 1;\n transform: perspective(1000px) rotate3d(1,0,0,0deg);\n animation-duration: 1s;\n animation-fill-mode: both;\n}\n\n.custom-leave-active {\n animation-name: flipOut;\n}</style><div class=\"highlight\"><pre><code class=\"css\">.awesome-component-wrap {\n color: white;\n line-height: 40px;\n padding: 10px 20px;\n border-radius: 10px;\n font-size: 16px;\n}\n\n@keyframes flipIn {\n 0% {\n opacity: 0;\n transform: perspective(1000px) rotate3d(1,0,0,45deg);\n }\n 100% {\n opacity: 1;\n transform: perspective(1000px) rotate3d(1,0,0,0deg);\n }\n}\n\n@keyframes flipOut {\n 0% {\n opacity: 1;\n transform: perspective(1000px) rotate3d(1,0,0,0deg);\n }\n 100% {\n opacity: 0;\n transform: perspective(1000px) rotate3d(1,0,0,45deg);\n }\n}\n\n.custom-enter,\n.custom-appear {\n opacity: 0;\n transform: perspective(1000px) rotate3d(1,0,0,45deg);\n transform-origin: 50% calc(100% + 10px);\n animation-duration: 1s;\n animation-fill-mode: both;\n}\n.custom-enter-active,\n.custom-appear-active {\n animation-name: flipIn;\n}\n\n.custom-leave {\n opacity: 1;\n transform: perspective(1000px) rotate3d(1,0,0,0deg);\n animation-duration: 1s;\n animation-fill-mode: both;\n}\n\n.custom-leave-active {\n animation-name: flipOut;\n}</code></pre></div>"},"status":"public","toc":""}]

基本使用

默认提供的动画样式，只有入场动画。


import { Button } from 'uxcore';
import { Animate } from 'uxcore';
import { Select } from 'uxcore';
const { Option } = Select;

class AwesomeComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div style={{ display: this.props.visible ? 'inline-block' : 'none' }} className="awesome-component-wrap bg-primary-color">
              动画展示区域
      </div>
    );
  }
}

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      visible: true,
      effect: 'fade',
    };
  }

  showComponent() {
    this.setState({
      visible: !this.state.visible,
    });
  }

  handleChange(value) {
    this.setState({
      effect: value,
    });
  }

  render() {
    const effects = ['fade', 'slideRight', 'slideDown', 'newspaper', 'fall', 'threeFallH', 'threeFallV', 'threeSign', 'superScale', 'threeSlit', 'threeRotateBottom', 'threeRotateLeft'];
    return (
      <div>
        <div style={{ height: '60px' }}>
          <Animate showProp="visible" transitionName={this.state.effect} transitionAppear>
            <AwesomeComponent visible={this.state.visible} />
          </Animate>
        </div>
        <div style={{ padding: '10px 0px' }}>
          <Select style={{ width: '200px' }} placeholder="切换动画效果" onChange={this.handleChange.bind(this)} value={this.state.effect}>
            {effects.map(item => <Option key={item}>{item}</Option>)}
          </Select>
          <Button type="outline" onClick={this.showComponent.bind(this)} style={{ marginLeft: '10px' }}>显示/隐藏</Button>
        </div>
      </div>
    );
  }
}

ReactDOM.render(
  <Demo />
, document.getElementById('components-animate-demo-basic'));

.awesome-component-wrap {
    color: white;
    line-height: 40px;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 16px;
}

定制动画

默认提供的动画样式，只有入场动画。


import { Button } from 'uxcore';
import { Animate } from 'uxcore';
import { Select } from 'uxcore';
const { Option } = Select;

class AwesomeComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div style={{ display: this.props.visible ? 'inline-block' : 'none' }} className="awesome-component-wrap bg-primary-color">
              动画展示区域
      </div>
    );
  }
}

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      visible: true,
    };
  }

  showComponent() {
    this.setState({
      visible: !this.state.visible,
    });
  }

  render() {
    return (
      <div>
        <div style={{ height: '60px' }}>
          <Animate showProp="visible" transitionName={'custom'} transitionAppear onEnd={(key, exists) => {
            console.log(key, exists);
          }}
          >
            <AwesomeComponent key="awesome" visible={this.state.visible} />
          </Animate>
        </div>
        <div style={{ padding: '10px 0px' }}>
          <Button type="outline" onClick={this.showComponent.bind(this)} style={{ marginLeft: '10px' }}>显示/隐藏</Button>
        </div>
      </div>
    );
  }
}

ReactDOM.render(
  <Demo />
, document.getElementById('components-animate-demo-custom'));

.awesome-component-wrap {
    color: white;
    line-height: 40px;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 16px;
}

@keyframes flipIn {
    0% {
        opacity: 0;
        transform: perspective(1000px) rotate3d(1,0,0,45deg);
    }
    100% {
        opacity: 1;
        transform: perspective(1000px) rotate3d(1,0,0,0deg);
    }
}

@keyframes flipOut {
    0% {
        opacity: 1;
        transform: perspective(1000px) rotate3d(1,0,0,0deg);
    }
    100% {
        opacity: 0;
        transform: perspective(1000px) rotate3d(1,0,0,45deg);
    }
}

.custom-enter,
.custom-appear {
    opacity: 0;
    transform: perspective(1000px) rotate3d(1,0,0,45deg);
    transform-origin: 50% calc(100% + 10px);
    animation-duration: 1s;
    animation-fill-mode: both;
}
.custom-enter-active,
.custom-appear-active {
    animation-name: flipIn;
}

.custom-leave {
    opacity: 1;
    transform: perspective(1000px) rotate3d(1,0,0,0deg);
    animation-duration: 1s;
    animation-fill-mode: both;
}

.custom-leave-active {
    animation-name: flipOut;
}

Props

配置项	类型	默认值	功能/备注
component	React.Element/String	'span'	使用什么元素或者组件来包裹 children，和 ReactCSSTransitionGroup 类似，如果不想有元素包裹，传 ''
showProp	String		指定用于控制显示/隐藏的 prop
transitionName	String		和 ReactCSSTransitionGroup 类似，指定对应的 css 名
transitionAppear	Boolean	false	是否支持 Appear 动画
transitionEnter	Boolean	true	是否支持 Enter 动画
transitionLeave	Boolean	true	是否支持 Leave 动画
onEnd	function(key, exists)	true	动画结束时的回调