Animate 动画

如果项目中使用的是 1.x 版本的基础组件（@alifd/next），请在左侧导航顶部切换组件版本。

安装方法

  1. 在命令行中执行以下命令npm install @icedesign/base@latest -S

开发指南

何时使用

需要自定义动效

API

动画

参数说明类型默认值
animation配置动画的播放方式, 详见animationString/Object{ appear: noop, enter: noop, leave: noop }
afterAppear在初始动画播放完毕触发的事件签名:Function() => voidFunction() => {}
afterEnter在进场动画播放完毕触发的事件签名:Function() => voidFunction() => {}
afterLeave在离开动画播放完毕触发的事件签名:Function() => voidFunction() => {}
component在针对多个子节点播放动画的时候包裹的标签any-
singleMode是否是有单个节点，如果有多个动画的孩子节点，设置该选项为falseBooleantrue
animationAppear是否在初始的时候播放动画Booleantrue

代码示例

基本

动效API使用

Animate 动画 - 图1

查看源码在线预览

  1. import { Animate, Button, Select } from "@icedesign/base";
  3. class App extends React.Component {
  4.   state = {
  5.     enter: "fadeInLeft",
  6.     leave: "fadeOutRight",
  7.     visible: false
  8.   };
  9.   componentDidMount() {
  10.     this.onClick();
  11.   }
  12.   render() {
  13.     const animation = {
  14.       enter: this.state.enter,
  15.       leave: this.state.leave
  16.     };
  18.     return (
  19.       <div>
  20.         <Animate
  21.           singleMode={false}
  22.           animation={animation}
  23.           afterEnter={this.afterEnter}
  24.           afterLeave={this.afterLeave}
  25.           className="demo"
  26.         >
  27.           {this.state.visible ? <div>Animate</div> : null}
  28.         </Animate>
  30.         <Selecter
  31.           defaultValue={{ in: this.state.enter, out: this.state.leave }}
  32.           onChange={this.onChange}
  33.         />
  35.         <Button onClick={this.onClick}>触发</Button>
  36.       </div>
  37.     );
  38.   }
  39.   onClick = () => {
  40.     this.setState({
  41.       visible: true
  42.     });
  44.     setTimeout(() => {
  45.       this.setState({
  46.         visible: false
  47.       });
  48.     }, 600);
  49.   };
  50.   onChange = animation => {
  51.     this.setState({
  52.       enter: animation.in,
  53.       leave: animation.out
  54.     });
  55.     this.onClick();
  56.   };
  57.   afterEnter() {
  58.     console.log("afterEnter");
  59.   }
  60.   afterLeave() {
  61.     console.log("afterLeave");
  62.   }
  63. }
  65. /* eslint-disable react/no-multi-comp */
  66. class Selecter extends React.Component {
  67.   constructor(props) {
  68.     super(props);
  69.     if (props.defaultValue) {
  70.       this.state = {
  71.         in: props.defaultValue.in,
  72.         out: props.defaultValue.out
  73.       };
  74.     } else {
  75.       this.state = {
  76.         in: "fadeInLeft",
  77.         out: "fadeOutRight"
  78.       };
  79.     }
  80.   }
  82.   render() {
  83.     return (
  84.       <div className="selecter">
  85.         <br />
  86.         <span>入场动画: </span>
  87.         <Select value={this.state.in} onChange={this.onChangeIn}>
  88.           {Animate.names.enter.map(i => {
  89.             return (
  90.               <option key={i} value={i}>
  91.                 {i}
  92.               </option>
  93.             );
  94.           })}
  95.         </Select>
  97.         <span> 出场动画: </span>
  98.         <Select value={this.state.out} onChange={this.onChangeOut}>
  99.           {Animate.names.leave.map(i => {
  100.             return (
  101.               <option key={i} value={i}>
  102.                 {i}
  103.               </option>
  104.             );
  105.           })}
  106.         </Select>
  107.         <br />
  108.         <br />
  109.       </div>
  110.     );
  111.   }
  113.   onChangeIn = v => {
  114.     let animation = { ...this.state, in: v };
  115.     this.setState(animation);
  116.     this.props.onChange && this.props.onChange(animation);
  117.   };
  118.   onChangeOut = v => {
  119.     let animation = { ...this.state, out: v };
  120.     this.setState(animation);
  121.     this.props.onChange && this.props.onChange(animation);
  122.   };
  123. }
  125. ReactDOM.render(<App />, mountNode);
  1. .demo {
  2.     color: #00BCD4;
  3.     display: block;
  4.     height: 100px;
  5.     line-height: 100px;
  6.     text-align: center;
  7.     font-size: 36px;
  8.     background-color: #ddd;
  9. }
  10. .selecter .next-select {
  11.     vertical-align: middle;
  12. }

class控制动画

className 用法

Animate 动画 - 图2

查看源码在线预览

  1. import { Animate, Button, Select } from "@icedesign/base";
  3. class App extends React.Component {
  4.   state = {
  5.     enter: "fadeInLeftBig",
  6.     leave: "fadeOutRightBig",
  7.     className: ""
  8.   };
  9.   render() {
  10.     return (
  11.       <div>
  12.         <div className="demo">
  13.           <div className={this.state.className}>Aniamte</div>
  14.         </div>
  16.         <Selecter
  17.           defaultValue={{ in: this.state.enter, out: this.state.leave }}
  18.           onChange={this.onChange}
  19.         />
  21.         <Button onClick={this.onClick}>触发</Button>
  22.       </div>
  23.     );
  24.   }
  25.   onClick = () => {
  26.     this.setState({
  27.       className: this.state.enter
  28.     });
  30.     setTimeout(() => {
  31.       this.setState({
  32.         className: this.state.leave
  33.       });
  34.       setTimeout(() => {
  35.         this.setState({
  36.           className: ""
  37.         });
  38.       }, 300);
  39.     }, 300);
  40.   };
  41.   onChange = animation => {
  42.     this.setState({
  43.       enter: animation.in,
  44.       leave: animation.out,
  45.       className: animation.in
  46.     });
  48.     setTimeout(() => {
  49.       this.onClick();
  50.     }, 0);
  51.   };
  52. }
  54. /* eslint-disable react/no-multi-comp */
  55. class Selecter extends React.Component {
  56.   constructor(props) {
  57.     super(props);
  58.     if (props.defaultValue) {
  59.       this.state = {
  60.         in: props.defaultValue.in,
  61.         out: props.defaultValue.out
  62.       };
  63.     } else {
  64.       this.state = {
  65.         in: "fadeInLeft",
  66.         out: "fadeOutRight"
  67.       };
  68.     }
  69.   }
  71.   render() {
  72.     return (
  73.       <div className="selecter">
  74.         <br />
  75.         <span>入场动画: </span>
  76.         <Select value={this.state.in} onChange={this.onChangeIn}>
  77.           {Animate.names.enter.map(i => {
  78.             return (
  79.               <option key={i} value={i}>
  80.                 {i}
  81.               </option>
  82.             );
  83.           })}
  84.         </Select>
  86.         <span> 出场动画: </span>
  87.         <Select value={this.state.out} onChange={this.onChangeOut}>
  88.           {Animate.names.leave.map(i => {
  89.             return (
  90.               <option key={i} value={i}>
  91.                 {i}
  92.               </option>
  93.             );
  94.           })}
  95.         </Select>
  96.         <br />
  97.         <br />
  98.       </div>
  99.     );
  100.   }
  102.   onChangeIn = v => {
  103.     let animation = { ...this.state, in: v };
  104.     this.setState(animation);
  105.     this.props.onChange && this.props.onChange(animation);
  106.   };
  107.   onChangeOut = v => {
  108.     let animation = { ...this.state, out: v };
  109.     this.setState(animation);
  110.     this.props.onChange && this.props.onChange(animation);
  111.   };
  112. }
  114. ReactDOM.render(<App />, mountNode);
  1. .demo {
  2.     color: #00BCD4;
  3.     display: block;
  4.     height: 100px;
  5.     line-height: 100px;
  6.     text-align: center;
  7.     font-size: 36px;
  8.     background-color: #ddd;
  9. }
  10. .selecter .next-select {
  11.     vertical-align: middle;
  12. }

入场出场

入场出场

Animate 动画 - 图3

查看源码在线预览

  1. import { Animate } from "@icedesign/base";
  3. const animation = {
  4.   enter: "expandInDown",
  5.   leave: "expandOutUp"
  6. };
  8. class App extends React.Component {
  9.   state = {
  10.     items: []
  11.   };
  12.   render() {
  13.     return (
  14.       <div className="demo2">
  15.         <div className="element">
  16.           <div className="addbtn" onClick={this.addItem.bind(this)}>
  17.             Add item
  18.           </div>
  19.           <Animate
  20.             singleMode={false}
  21.             animation={animation}
  22.             afterEnter={this.afterEnter}
  23.             afterLeave={this.afterLeave}
  24.           >
  25.             {this.state.items}
  26.           </Animate>
  27.         </div>
  28.       </div>
  29.     );
  30.   }
  31.   addItem() {
  32.     let { items } = this.state,
  33.       key = Date.now(),
  34.       item = (
  35.         <div key={key}>
  36.           {" "}
  37.           <a href="javascript:;" onClick={this.removeItem.bind(this, key)}>
  38.             Remove
  39.           </a>
  40.         </div>
  41.       );
  43.     items.push(item);
  44.     this.setState({ items });
  45.   }
  46.   removeItem(key) {
  47.     let { items } = this.state,
  48.       i,
  49.       list = items.slice();
  51.     list.forEach((item, index) => {
  52.       if (item.key == key) {
  53.         i = index;
  54.       }
  55.     });
  56.     if (i > -1) {
  57.       list.splice(i, 1);
  58.       this.setState({ items: list });
  59.     }
  60.   }
  61.   afterEnter() {
  62.     console.log("afterEnter");
  63.   }
  64.   afterLeave() {
  65.     console.log("afterLeave");
  66.   }
  67. }
  69. ReactDOM.render(<App />, mountNode);
  1. .demo2 {
  2.     color: #4C4C4C;
  3.     height: 400px;
  4.     background-color: #eee;
  5.     margin: 0 auto;
  6.     padding-top: 30px;
  7. }
  8. .element{
  9.     width: 300px;
  10.     margin: 70px auto;
  11.     color: #000;
  12.     text-align: center;
  13. }
  14. .element span div{
  15.     height: 30px;
  16.     background-color: #4C4C4C;
  17.     border-bottom: 1px solid #eee;
  18.     cursor: pointer;
  19.     transition: all 1s;
  21. }
  22. .addbtn{
  23.    cursor: pointer;
  24.    background-color: #2196F3;
  25.    height: 40px;
  26.    line-height: 40px;
  27. }
  28. .element a {
  29.     color: white;
  30.     line-height: 30px;
  31. }

相关区块

Animate 动画 - 图4

暂无相关区块