This package has been deprecated

Author message:

this package has been deprecated

playground-transition

playground-transition

一种实现页面不同状态切换时动态移出和移入页面内容的解决方案

实现逻辑

将展示区域看作是一个playground,playground有两个scene(current & next),current为用户可见界面，切换状态时将要展现的界面置于next,根据预先配置的动画效果对页面内容进行移入和移出，动画结束将next变成current,就得current从dom移除，等待下一次的切换。

使用方法

1、 引入playground

import Playground from 'playground-transition'

2、playground传入需要显示的A组件以及A显示需要的数据

<Playground component={A} propsData={AData}></Playground>

写法对比： 假设页面上两个状态分别根据状态值show来决定显示A 还是 B，以前的写法是

if (show == 'a' ){
  return <A {...AData} />
} else {
  return <B {...BData} />
}

现在的写法是

let playgroundProps = {};
if (show == 'a') {
  playgroundProps.component = A;
  playgroundProps.propsData = AData; 
} else {
   playgroundProps.component = B;
   playgroundProps.propsData = BData;
}
return <Playground {...playgroundProps} />

3、放入playground的component(A,B)配置动画效果,通过调用props上的willInConfig和willOutConfig来配置进场和出场的效果。入参config后面介绍，type默认不填，挡需要更新配置时传'update'

    this.props.willInConfig(willInConfig, type);
    this.props.willOutConfig(willOutConfig, type);

4、config 配置

[//配置为一个数组，同时移动的元素放在一项里
  {
    type：'sync',//sync:同时移动 
    elList: [
      {
        el,//元素节点
        hideStyle,//位移元素消失的状态，willin从哪来，willout去哪里 hideStyle/pattern二选一
        pattern,//目前只支持fade, offset，left，right, hideStyle/pattern二选一
        time,//动画时间,默认取外面的time
      }
    ],
    time,//动画时间
  },
  {
    type：'combine',// combine 移动的元素和下一场有关联
    elList: [
      {
        el,//元素节点
        pattern,//填一个备用，以防场景切换没有找到匹配的元素
        id,//combine模式配置，匹配下一个scene有联系元素
        isMoveEl,//是否是移动元素,
        time,//动画时间,默认去外面的time
      }
    ],
    time,//动画时间
  }
]

demo

demo地址

源代码见test目录