目前本人学习到 react 动画组件库，react-transition-group 有一颗感兴趣的心，也想学学大神，翻译一下文档，所以就拿这个开刀，动手。 原文通道
 react-transition-group 之 Transition
 react-transition-group 之 CSSTransition
 react-transition-group 之 SwitchTransition
 react-transition-group 之 TransitionGroup
 
 
Transition 过渡
 
Transition 组件允许你使用一个简单的申明API去描述一个组件在一段时间内从一个状态过渡到另一个组件。最常见的是，它用于设置组件的挂载和卸载的过渡，但也可以用于描述组件状态本身的过渡
 
 
 
The Transition component lets you describe a transition from one component state to another over time with a simple declarative API. Most commonly it’s used to animate the mounting and unmounting of a component, but can also be used to describe in-place transition states as well.
 
 
注意: Transition 是一个不限制平台的跟组件。如果你正在使用css来过渡，你可以使用CSSTransition组件来代替。它不仅包含了Transition组件的所有功能，而且还额外包含了一些Css 过渡所必须的特征。（组件由此得名——Transition）
 
 
 
Note: Transition is a platform-agnostic base component. If you’re using transitions in CSS, you’ll probably want to use CSSTransition instead. It inherits all the features of Transition, but contains additional features necessary to play nice with CSS transitions (hence the name of the component).
 
 
默认情况下Transition 组件渲染不会产生额外的副作用，它仅仅是维护组件的enter和exit状态。这些状态的意义和效果取决于你。例如：当组件enter（进入）或者exite（退出）我们可以给组件添加一个内联样式。
 
 
 
By default the Transition component does not alter the behavior of the component it renders, it only tracks “enter” and “exit” states for the components. It’s up to you to give meaning and effect to those states. For example we can add styles to a component when it enters or exits:
 
 
import { Transition } from 'react-transition-group';
// 定义过渡的时间
const duration = 300;
// 定义默认的样式， css transition的属性
const defaultStyle = {
  transition: `opacity ${duration}ms ease-in-out`,
  opacity: 0,
}
// 动画的样式
const transitionStyles = {
  entering: { opacity: 1 },
  entered:  { opacity: 1 },
  exiting:  { opacity: 0 },
  exited:  { opacity: 0 },
};

const Fade = ({ in: inProp }) => (
  <Transition in={inProp} timeout={duration}>
    {state => (
      <div style={{
        ...defaultStyle,
        ...transitionStyles[state]
      }}>
        I'm a fade Transition!
      </div>
    )}
  </Transition>
);
 
Transition 组件包含 4种状态：
 
‘entering’ 进入中
‘entered’ 进入完成
‘exiting’ 退出中
‘exited’ 完成退出
 
 
 
There are 4 main states a Transition can be in:
 
 
‘entering’
‘entered’
‘exiting’
‘exited’
 
 
Transition 组件的状态通过in属性来触发。当为 true 的时候，组件开始进入 Enter(进入)阶段。在这一期间，组件将会切换它当前的阶段，从 entering(进入中) 状态等待 duration（过渡时间）完成切换到 entered(完成进入) 状态。让我举下面的例子（我们将会使用 useState 钩子）
 
 
 
Transition state is toggled via the in prop. When true the component begins the “Enter” stage. During this stage, the component will shift from its current transition state, to ‘entering’ for the duration of the transition and then to the ‘entered’ stage once it’s complete. Let’s take the following example (we’ll use the useState hook):
 
 
function App() {
  const [inProp, setInProp] = useState(false);
  return (
    <div>
      <Transition in={inProp} timeout={500}>
        {state => (
          // ...
        )}
      </Transition>
      <button onClick={() => setInProp(true)}>
        Click to Enter
      </button>
    </div>
  );
}
 
当按钮被点击时，组件将会切换到entering(进入中)状态然后保持500ms（timeout 属性定义的之）的过渡动画,它最终回切换到entered(进入完成)状态
 
 
 
When the button is clicked the component will shift to the ‘entering’ state and stay there for 500ms (the value of timeout) before it finally switches to ‘entered’.
 
 
当 in属性为 false时候，发和上面进入发生同样的事情，（组件切换到exiting退出中状态然后等待500ms切换到exited 退出完成状态）
 
 
 
When in is false the same thing happens except the state moves from ‘exiting’ to ‘exited’.
 
 
Props 属性
 
nodeRef
 
需要添加过渡的React DOM的引用：详情查看 https://stackoverflow.com/a/51127130/4671932
 
当 nodeRef 属性被使用时候, 节点不会传递一个回调函数（例如：onEnter 事件），因为用户已经可以直接访问该节点
在 TransitionGroup组件中改变Transition 组件中 key 的属性需要提供改变的属性key （查看 text/CSSTransition-test.js）
 
type: shape
 
 
 
A React reference to DOM element that need to transition: https://stackoverflow.com/a/51127130/4671932
 
 
When nodeRef prop is used, node is not passed to callback functions (e.g. onEnter) because user already has direct access to the node.
When changing key prop of Transition in a TransitionGroup a new nodeRef need to be provided to Transition with changed key prop (see test/CSSTransition-test.js).
 type: shape
 
 
children
 
child属性必须是一个函数而不是React 元素。函数的参数是当前过渡状态（entering(进入中)，entered(完成进入)，exiting(退出中)，exited(完成退出)）,该状态当作上下文被用于子级组件的属性。
 
 
 
A function child can be used instead of a React element. This function is called with the current transition status (‘entering’, ‘entered’, ‘exiting’, ‘exited’), which can be used to apply context specific props to a component.
 
 
<Transition in={this.state.in} timeout={150}>
  {state => (
    <MyComponent className={`fade fade-${state}`} />
  )}
</Transition>
 
type: Function | element
 required（必须）
 
in
 
用于显示里面的子组件，修改后触发进入或者退出状态
 
 
 
Show the component; triggers the enter or exit states
 
 
type: boolean
 default: false
 
mountOnEnter
 
默认情况下，子组件和Transition 组件是立即被挂载的。如果你想在Transition组件第一次 in= {true}的情况下启用“懒加载”，你可以设置 mountOnEnter={true}。组件在第一次进入的 Transition 组件将保持在挂载，甚至在exited(完成退出)组件也保持在挂载阶段，不会生成实际的DOM,除非你特别指定unmountOnExit
 
 
 
By default the child component is mounted immediately along with the parent Transition component. If you want to “lazy mount” the component on the first in={true} you can set mountOnEnter. After the first enter transition the component will stay mounted, even on “exited”, unless you also specify unmountOnExit.
 
 
type: boolean
 default: false
 
unmountOnExit
 
默认情况下，子组件在达到“exited(完成退出)”状态后保持挂载状态。如果希望在组件完成exiting(退出)后卸载组件，请设置unmountOnExit
 
 
 
By default the child component stays mounted after it reaches the ‘exited’ state. Set unmountOnExit if you’d prefer to unmount the component after it finishes exiting.
 
 
type: boolean
 default: false
 
appear
 
默认情况下，子组件在第一次装载时不执行enter(进入)过渡动画，而与in的值无关。如果需要此行为，请将“appear”和“in”都设置为true
 
 
 
By default the child component does not perform the enter transition when it first mounts, regardless of the value of in. If you want this behavior, set both appear and in to true.
 
 
注意：这里没有额外的appear状态，类似 appearing/appeared,这个属性仅仅添加到额外的enter(进入)阶段的过渡。然而，在 <CSSTransition>组件中第一次进入过渡可以添加额外的.appea-*类名，这样就可以个性化不同的样式
 
 
 
Note: there are no special appear states like appearing/appeared, this prop only adds an additional enter transition. However, in the component that first enter transition does result in additional .appear-* classes, that way you can choose to style it differently.
 
 
type: boolean
 default: false
 
enter
 
启用或者禁用 enter(进入)阶段的过渡效果
 
 
 
Enable or disable enter transitions.
 
 
type: boolean
 default: true
 
exit
 
启用或者禁用exit(退出)阶段的过渡
 
 
 
Enable or disable exit transitions.
 
 
type: boolean
 default: true
 
timeout
 
过渡的持续时间（毫秒），必选除非提供了 addEndListener事件
 
 
 
The duration of the transition, in milliseconds. Required unless addEndListener is provided.
 
 
你可以指定单个时间对于整个过渡：
 
 
 
You may specify a single timeout for all transitions:
 
 
timeout={500}
or individually:

timeout={{
 appear: 500,
 enter: 300,
 exit: 500,
}}
 
appear defaults to the value of enter
enter defaults to 0 exit
defaults to 0
 
type: number | { enter?: number, exit?: number, appear?: number }
 
addEndListener
 
添加一个自定义过渡结束后的事件。返回的参数是过渡中的DOM节点和一个 done()回调函数。允许更细粒度处理过渡结束后的逻辑。如果使用了，超时会依然作为fallback使用
 
 
 
Add a custom transition end trigger. Called with the transitioning DOM node and a done callback. Allows for more fine grained transition end logic. Timeouts are still used as a fallback if provided.
 
 
注意：，当 nodeRef属性使用时，node 不会被当作参数返回
 
 
 
Note: when nodeRef prop is passed, node is not passed.
 
 
addEndListener={(node, done) => {
  // use the css transitionend event to mark the finish of a transition
  node.addEventListener('transitionend', done, false);
}}
 
type: Function
 
onEnter
 
在应用“enter”状态之前触发回调。提供了一个额外的参数isAppearing来指示enter阶段是否发生在首次挂载上
 
 
 
Callback fired before the “entering” status is applied. An extra parameter isAppearing is supplied to indicate if the enter stage is occurring on the initial mount
 
 
**注意：**当 nodeRef属性使用时，node 不会被当作参数返回
 
 
 
Note: when nodeRef prop is passed, node is not passed.
 
 
type: Function(node: HtmlElement, isAppearing: bool) -> void
 default: function noop() {}
 
onEntering
 
在应用“enter(进入完成)”状态之前触发回调。提供了一个额外的参数isAppearing来指示enter阶段是否发生在首次挂载上
 
 
 
Callback fired after the “entering” status is applied. An extra parameter isAppearing is supplied to indicate if the enter stage is occurring on the initial mount
 
 
注意： 当 nodeRef属性使用时，node 不会被当作参数返回
 
 
 
Note: when nodeRef prop is passed, node is not passed.
 
 
type: Function(node: HtmlElement, isAppearing: bool)
 default: function noop() {}
 
onEntered
 
在应用“enter(进入完成)”状态之前触发回调。提供了一个额外的参数isAppearing来指示enter阶段是否发生在首次挂载上
 
 
 
Callback fired after the “entered” status is applied. An extra parameter isAppearing is supplied to indicate if the enter stage is occurring on the initial mount
 
 
注意： 当 nodeRef属性使用时，node 不会被当作参数返回
 
 
 
Note: when nodeRef prop is passed, node is not passed.
 
 
type: Function(node: HtmlElement, isAppearing: bool) -> void
 default: function noop() {}
 
onExit
 
在状态切换到exit(退出阶段)之前触发
 
 
 
Callback fired before the “exiting” status is applied.
 
 
注意： 当 nodeRef属性使用时，node 不会被当作参数返回
 
 
 
Note: when nodeRef prop is passed, node is not passed.
 
 
type: Function(node: HtmlElement) -> void
 default: function noop() {}
 
onExiting
 
在状态切换到exiting（退出中）之后触发
 
 
 
Callback fired after the “exiting” status is applied.
 
 
注意： 当 nodeRef属性使用时，node 不会被当作参数返回
 
 
 
Note: when nodeRef prop is passed, node is not passed.
 
 
type: Function(node: HtmlElement) -> void
 default: function noop() {}
 
onExited
 
在状态切换到exit(退出完成)时触发
 
 
 
Callback fired after the “exited” status is applied.
 
 
注意： 当 nodeRef属性使用时，node 不会被当作参数返回
 
 
 
Note: when nodeRef prop is passed, node is not passed
 
 
type: Function(node: HtmlElement) -> void
 default: function noop() {}

 
 
原文地址： https://reactcommunity.org/react-transition-group/transition-group
 react-transition-group 之 Transition
 react-transition-group 之 CSSTransition
 react-transition-group 之 SwitchTransition
 react-transition-group 之 TransitionGroup
 
 
<TransitionGroup>组件管理列表中的一组过渡组件（<Transition>和<CSSTransition>）。像<Transition>组件一样，<TransitionGroup>组件是一个状态容器，用于在时间范围内组件的挂载与卸载。
 
 
 
The component manages a set of transition components ( and ) in a list. Like with the transition components, is a state machine for managing the mounting and unmounting of components over time.
 
 
思考下面的例子。当items被移除或添加到TodoList时，<TransitionGroup>组件会自动切换in属性。
 
 
 
Consider the example below. As items are removed or added to the TodoList the in prop is toggled automatically by the .
 
 
注意： <TransitionGroup>组件不会定义任何的动画行为！列表项的精确的动画方式取决于单独的过渡组件。这意味着您可以跨不同的列表项混合和自定义动画方式。
 
 
 
Note that does not define any animation behavior! Exactly how a list item animates is up to the individual transition component. This means you can mix and match animations across different list items.
 
 
Example
 
 
 
案例查看原文
 
 
Props
 
component
 
<TransitionGroup>组件默认渲染一个div容器。你可以改变当前的行为通过提供一个 component属性。如果你使用React v16+并且不希望外部添加一个<div>容器，可以把component属性赋值为null(component={null})。这是非常有效对于你想通过外部的div盒子来使用你的CSS样式
 
 
 
 renders a 
 

   by default. You can change this behavior by providing a component prop. If you use React v16+ and would like to avoid a wrapping 
  

    element you can pass in component={null}. This is useful if the wrapping div borks your css styles.
  
 
 
 
 
type: any
 default: 'div'
 
children
 
一组<Transition>组件，在它们离开时进行切换。<TransitionGroup>组件将使用特定的过渡属性，因此如果您像我们的<Fade>示例那样包装<transition>，请记住将它们分散开来
 
 
 
A set of components, that are toggled in and out as they leave. the will inject specific transition props, so remember to spread them through if you are wrapping the as with our example.
 
 
虽然此组件的是用于过渡多个<Transition>组件或者<CSSTransition>组件，有时你可以想要只过渡一个内容是手动控制淡入淡出（例如：路由，图片等）的子组件。在这种情况下，你改变子组件的内容的同时，可以改变子组件的key属性,<TransitionGroup >组件会过渡子组件的动画。
 
 
 
While this component is meant for multiple Transition or CSSTransition children, sometimes you may want to have a single transition child with content that you want to be transitioned out and in when you change it (e.g. routes, images etc.) In that case you can change the key prop of the transition child as you change its content, this will cause TransitionGroup to transition the child out and back in.
 
 
type: any
 
appear
 
A convenience prop that enables or disables appear animations for all children. Note that specifying this will override any defaults set on individual children Transitions.
 
type: boolean
 
enter
 
一个方便的属性，用于启用或者禁用所有子组件enter(进入)阶段的动画。请注意，指定此选项将覆盖在单个子组件上设置的任何默认值
 
 
 
A convenience prop that enables or disables enter animations for all children. Note that specifying this will override any defaults set on individual children Transitions.
 
 
type: boolean
 
exit
 
一个方便的属性，用于启用或者禁用所有子组件exit(退出)阶段的动画。请注意，指定此选项将覆盖在单个子组件上设置的任何默认值
 
 
 
A convenience prop that enables or disables exit animations for all children. Note that specifying this will override any defaults set on individual children Transitions.
 
 
type: boolean
 
childFactory
 
你可能需要对exiting(正在退出)阶段的子组件响应式的更新。这通常是通过使用cloneElement（克隆元素） 来完成的，但是在·exiting(退出中)阶段子元素的情况下，该元素已经被移除，使用者无法访问
 
 
 
You may need to apply reactive updates to a child as it is exiting. This is generally done by using cloneElement however in the case of an exiting child the element has already been removed and not accessible to the consumer.
 
 
如果你需要去更新一个已经销毁的或者正在销毁的子组件，你可以提供一个childFactory属性来包裹每一个子组件
 
 
 
If you do need to update a child as it leaves you can provide a childFactory to wrap every child, even the ones that are leaving.
 
 
type: Function(child: ReactElement) -> ReactElement
 default: child => child

简述
 
《activiti学习（十九）——流程虚拟机源码分析（一）——流程启动源码分析》一文中最后，流程从startEvent节点执行takeAll准备离开。本文我们分析一下从开始节点到下一个节点之前虚拟机做了什么。由于流程虚拟机条件分支情况很多，一一叙述非常繁琐（有些我自己理解也不透彻），所以我会用最简单的模型去跟踪其流转，如下图：
 
 
我们假设起点startEvent的下一个节点是一个普通的userTask，本文跟踪其在流程虚拟机的代码走向。
 
 
 
跟踪源码
 
上一篇文章我们跟踪到ExecutionEntity的takeAll方法。startEvent活动类通过调用这个方法离开startEvent节点。
 
public class ExecutionEntity extends VariableScopeImpl implements ActivityExecution, ExecutionListenerExecution, Execution, PvmExecution, 
	ProcessInstance, InterpretableExecution, PersistentObject, HasRevision {

//......

  public void takeAll(List<PvmTransition> transitions, List<ActivityExecution> recyclableExecutions) {
  	
  	fireActivityCompletedEvent();
  	
    transitions = new ArrayList<PvmTransition>(transitions);
    recyclableExecutions = (recyclableExecutions!=null ? new ArrayList<ActivityExecution>(recyclableExecutions) : new ArrayList<ActivityExecution>());
    
    if (recyclableExecutions.size()>1) {
      for (ActivityExecution recyclableExecution: recyclableExecutions) {
        if (((ExecutionEntity)recyclableExecution).isScope()) {
          throw new PvmException("joining scope executions is not allowed");
        }
      }
    }

    ExecutionEntity concurrentRoot = ((isConcurrent && !isScope) ? getParent() : this);
    List<ExecutionEntity> concurrentActiveExecutions = new ArrayList<ExecutionEntity>();
    List<ExecutionEntity> concurrentInActiveExecutions = new ArrayList<ExecutionEntity>();
    for (ExecutionEntity execution: concurrentRoot.getExecutions()) {
      if (execution.isActive()) {
        concurrentActiveExecutions.add(execution);
      } else {
        concurrentInActiveExecutions.add(execution);
      }
    }

    if ( (transitions.size()==1)
         && (concurrentActiveExecutions.isEmpty())
         && allExecutionsInSameActivity(concurrentInActiveExecutions)
       ) {

      List<ExecutionEntity> recyclableExecutionImpls = (List) recyclableExecutions;
      recyclableExecutions.remove(concurrentRoot);
      for (ExecutionEntity prunedExecution: recyclableExecutionImpls) {
        Context.getCommandContext().getHistoryManager().recordActivityEnd(prunedExecution);
        prunedExecution.remove();
        
      }

      concurrentRoot.setActive(true);
      concurrentRoot.setActivity(activity);
      concurrentRoot.setConcurrent(false);
      concurrentRoot.take(transitions.get(0), false);

    } else {
//......
  }

  public void take(PvmTransition transition, boolean fireActivityCompletionEvent) {
 
  	if (fireActivityCompletionEvent) {
	  	fireActivityCompletedEvent();
  	}
  	
    if (this.transition!=null) {
      throw new PvmException("already taking a transition");
    }
    if (transition==null) {
      throw new PvmException("transition is null");
    }
    setActivity((ActivityImpl)transition.getSource());
    setTransition((TransitionImpl) transition);
    performOperation(AtomicOperation.TRANSITION_NOTIFY_LISTENER_END);
  }

//......
}
 
第8行fireActivityCompletedEvent方法会触发全局事件转发器转发ACTIVITY_COMPLETED事件。11行由于入参recyclableExecutions为空，所以为recyclableExecutions新建一个空的数组。22行isConcurrent默认为false，isScope默认是true，因此concurrentRoot赋值为this。32-34行判断假设startEvent的“出线”只有一条，则此时判断为true。48行通过take离开startEvent节点。66行设置当前活动为startEvent的ActivitiImpl，67行设置当前的连线，68行调用原子操作performOperation(AtomicOperation.TRANSITION_NOTIFY_LISTENER_END)。这个原子操作的调用我们上一篇文章分析过，这里不再细述。看看AtomicOperation.TRANSITION_NOTIFY_LISTENER_END对应的AtomicOperationTransitionNotifyListenerEnd类：
 
public class AtomicOperationTransitionNotifyListenerEnd extends AbstractEventAtomicOperation {

//......

  protected String getEventName() {
    return org.activiti.engine.impl.pvm.PvmEvent.EVENTNAME_END;
  }

  protected void eventNotificationsCompleted(InterpretableExecution execution) {
    execution.performOperation(TRANSITION_DESTROY_SCOPE);
  }
}
 
这里原子操作首先会触发实行监听器的end事件，然后执行原子操作performOperation(TRANSITION_DESTROY_SCOPE)。即调用AtomicOperationTransitionDestroyScope类
 
public class AtomicOperationTransitionDestroyScope implements AtomicOperation {

//......

  @SuppressWarnings("unchecked")
  public void execute(InterpretableExecution execution) {
    InterpretableExecution propagatingExecution = null;

    ActivityImpl activity = (ActivityImpl) execution.getActivity();
    if (activity.isScope()) {      
//......
    } else {
      propagatingExecution = execution;
    }

    ScopeImpl nextOuterScopeElement = activity.getParent();
    TransitionImpl transition = propagatingExecution.getTransition();
    ActivityImpl destination = transition.getDestination();
    if (transitionLeavesNextOuterScope(nextOuterScopeElement, destination)) {
      propagatingExecution.setActivity((ActivityImpl) nextOuterScopeElement);
      propagatingExecution.performOperation(TRANSITION_NOTIFY_LISTENER_END);
    } else {
      propagatingExecution.performOperation(TRANSITION_NOTIFY_LISTENER_TAKE);
    }
  }

  public boolean transitionLeavesNextOuterScope(ScopeImpl nextScopeElement, ActivityImpl destination) {
    return !nextScopeElement.contains(destination);
  }
}
 
执行execution方法，第10行的if判断为false，注意execution的isScope为true，但是ActivityImpl的isScope为false，所以这里执行13行的代码。16行获取activity.getParent()，即startEvent的parent，是Process对象。18行获取连线终点的活动。19行判断Process中是否含有下一个节点的活动，因此28行函数判断为false（!符号取了相反的值），因此走23行performOperation(TRANSITION_NOTIFY_LISTENER_TAKE)，会调用AtomicOperationTransitionNotifyListenerTake类。
 
public class AtomicOperationTransitionNotifyListenerTake implements AtomicOperation {
  
//......

  public void execute(InterpretableExecution execution) {
    TransitionImpl transition = execution.getTransition();
    
    List<ExecutionListener> executionListeners = transition.getExecutionListeners();
    int executionListenerIndex = execution.getExecutionListenerIndex();
    
    if (executionListeners.size()>executionListenerIndex) {
      execution.setEventName(org.activiti.engine.impl.pvm.PvmEvent.EVENTNAME_TAKE);
      execution.setEventSource(transition);
      ExecutionListener listener = executionListeners.get(executionListenerIndex);
      try {
        listener.notify(execution);
      } catch (RuntimeException e) {
        throw e;
      } catch (Exception e) {
        throw new PvmException("couldn't execute event listener : "+e.getMessage(), e);
      }
      execution.setExecutionListenerIndex(executionListenerIndex+1);
      execution.performOperation(this);

    } else {
      execution.setExecutionListenerIndex(0);
      execution.setEventName(null);
      execution.setEventSource(null);

      ActivityImpl activity = (ActivityImpl) execution.getActivity();
      ActivityImpl nextScope = findNextScope(activity.getParent(), transition.getDestination());
      execution.setActivity(nextScope);
      
      if(Context.getProcessEngineConfiguration() != null && Context.getProcessEngineConfiguration().getEventDispatcher().isEnabled()) {
      	Context.getProcessEngineConfiguration().getEventDispatcher().dispatchEvent(
    			ActivitiEventBuilder.createSequenceFlowTakenEvent(ActivitiEventType.SEQUENCEFLOW_TAKEN, transition.getId(),
    					activity.getId(), (String) activity.getProperties().get("name") ,(String) activity.getProperties().get("type"), activity.getActivityBehavior().getClass().getCanonicalName(),
    					nextScope.getId(), (String) nextScope.getProperties().get("name"), (String) nextScope.getProperties().get("type"), nextScope.getActivityBehavior().getClass().getCanonicalName()));
      }
      execution.performOperation(TRANSITION_CREATE_SCOPE);
    }
  }

  /** finds the next scope to enter.  the most outer scope is found first */
  public static ActivityImpl findNextScope(ScopeImpl outerScopeElement, ActivityImpl destination) {
    ActivityImpl nextScope = destination;
    while( (nextScope.getParent() instanceof ActivityImpl)
           && (nextScope.getParent() != outerScopeElement)
         ) {
      nextScope = (ActivityImpl) nextScope.getParent();
    }
    return nextScope;
  }
}
 
8-23行嵌套调用，遍历每一个执行监听器触发take事件。30-32行把execution的当前活动设置为下一个活动节点。34-38行触发全局事件转发器SEQUENCEFLOW_TAKEN事件。从此execution进入下一个节点。
 
 
 
小结
 
普遍来说，流程从一般的活动离开，就是通过ExecutionEntity的take方法，然后经历数个原子操作，触发执行监听器和全局事件转发器对应的事件，如果涉及子流程、网关形成的分支流程等，则情况会更复杂一些。最后把该触发的事件都触发完毕之后，把ExecutionEntity当前的活动设置为下一个节点，就此进入下一个节点相关的活动中。

 
 
当前模块原文地址：https://reactcommunity.org/react-transition-group/switch-transition
 react-transition-group 之 Transition
 react-transition-group 之 CSSTransition
 react-transition-group 之 SwitchTransition
 react-transition-group 之 TransitionGroup
 
 
SwitchTransition组件灵感来自于vue transition的模式。可以使用SwitchTransition来控制状态之间的渲染。基于选择的模式和子组件的 key 来使 Transition组件，CSSTransition组件和SwitchTransition组件之间进行对应的过渡。
 
 
 
A transition component inspired by the vue transition modes. You can use it when you want to control the render between state transitions. Based on the selected mode and the child’s key which is the Transition or CSSTransition component, the SwitchTransition makes a consistent transition between them.
 
 
如果选择out-in模式，SwitchTransition组件将会等待旧的子组件卸载后然后在插入新的子组件。如果选in-out模式，SwitchTransition组件将会先插入新的组件，等待新组件进入后在来卸载旧子组件。
 
 
 
If the out-in mode is selected, the SwitchTransition waits until the old child leaves and then inserts a new child. If the in-out mode is selected, the SwitchTransition inserts a new child first, waits for the new child to enter and then removes the old child.
 
 
注意： 如果你想要同时使用动画（例如： 旧子组件移除的同时来插入新的子组件），你应该使用TransitionGroup组件。（换一句话说：SwitchTransition组件用于的是动画是有顺序的）
 
 
 
Note: If you want the animation to happen simultaneously (that is, to have the old child removed and a new child inserted at the same time), you should use TransitionGroup instead.
 
 
function App() {
 const [state, setState] = useState(false);
 return (
   <SwitchTransition>
     <CSSTransition
       key={state ? "Goodbye, world!" : "Hello, world!"}
       addEndListener={(node, done) => node.addEventListener("transitionend", done, false)}
       classNames='fade'
     >
       <button onClick={() => setState(state => !state)}>
         {state ? "Goodbye, world!" : "Hello, world!"}
       </button>
     </CSSTransition>
   </SwitchTransition>
 );
}
.fade-enter{
   opacity: 0;
}
.fade-exit{
   opacity: 1;
}
.fade-enter-active{
   opacity: 1;
}
.fade-exit-active{
   opacity: 0;
}
.fade-enter-active,
.fade-exit-active{
   transition: opacity 500ms;
}
 
Example
 
见原文的编辑器中的代码，传送门
 
Props
 
mode
 
组件过渡的模式，out-in: 等待当前元素过渡完成后在插入新的元素进行过渡动画。in-out：新的元素先进行插入完成后，当前旧的元素过渡移除
 
 
 
Transition modes. out-in: Current element transitions out first, then when complete, the new element transitions in. in-out: New element transitions in first, then when complete, the current element transitions out.
 
 
type: 'out-in'|'in-out'
 default: 'out-in'
 
children
 
任意的 Transition组件或者CSSTransition组件
 
 
 
Any Transition or CSSTransition component.
 
 
type: element