精华内容
下载资源
问答
  • 目前本人学习到 react 动画组件库,react-transition-group 有一颗感兴趣的心,也想学学大神,翻译一下文档,所以就拿这个开刀,动手。 原文通道 Transition 过渡 Transition 组件允许你使用一个简单的申明API去...

    目前本人学习到 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 组件渲染不会产生额外的副作用,它仅仅是维护组件的enterexit状态。这些状态的意义和效果取决于你。例如:当组件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 <TransitionGroup>组件管理列表中的一组过渡组件(<Transition>和<CSSTransition>)。像<Transition>...

    原文地址: 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

    展开全文
  • } if (transition==null) { throw new PvmException("transition is null"); } setActivity((ActivityImpl)transition.getSource()); setTransition((TransitionImpl) transition); performOperation(Atomic...

    简述

    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当前的活动设置为下一个节点,就此进入下一个节点相关的活动中。

    展开全文
  • 原文地址 ...基于选择的模式和子组件的 key 来使 Transition组件,CSSTransition组件和SwitchTransition组件之间进行对应的过渡。 A transition component inspir.

    当前模块原文地址: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

    展开全文
  • 什么是Transition? 安卓5.0中Activity和Fragment 变换是建立在名叫Transitions的安卓新特性之上的。这个诞生于4.4的transition框架为在不同的UI状态之间产生动画效果提供了非常方便的API。该框架主要基于两个概念:...
  • react-transition-group 翻译系列 react-transition-group 之 Transition CSSTransition组件的灵感来源ng-animate(详情) 库,如果你正在使用CSS来实现过渡或者动画可以使用该组件。CSSTransition组件是基于 ...
  • ITILv3 核心组件5本书的第三部分 IT服务管理 需要的下~英文版 网上暂时还没有中文版的~
  • State与TransitionTransition

    千次阅读 2017-04-09 14:41:26
    Transition 过渡使用Transition使State状态变化时,消除状态变化产生的突变。 所有Item都有个transitions属性,它保存着所有的过渡,它是一个列表类型。Properties animations : list< Animation >//动画列表,过渡...
  • 每次d3画图要用到渐变都去参考别人的例子,今天花点时间总结了一下d3中的Transition:用于元素的缓动加载,也可以认为是渐变。小功能有大用处,下面我通过两个例子向大家展示Transition。欢迎交流,共同进步。
  • Transition Options 转换选项 Within a selectable component there are several transition options depending on what state the selectable is currently in. The different states are: normal, highlighted, ...
  •   本文为一篇神经机器翻译的文章,发表在2019AAAI会议上,主要提出一种深度转移网络(Deep Transition),结合多头注意力解决循环神经网络中同一层不同时刻之间shallow的问题。 一、简要信息 序号 属性 值 ...
  • React动画之react-transition-group使用

    万次阅读 2017-06-05 11:39:10
    代码地址请在github查看,如果有新内容,我会定时更新,也欢迎您star,issue,共同进步写在开头的话这其实是对react-transition-group文档的翻译。但是在其中夹杂了很多自己的理解,如有不对的地方,还请issue。运行...
  • Transition的使用分析

    千次阅读 2016-06-29 15:56:46
    Transition的使用分析,基于使用的角度稍作分析
  • 这篇文章是对n Android 5.0 中Activity和Fragment transition API的一个总体回顾,这是关于transition系列文章的第一篇。 第一章: Activity和Fragment Transition介绍 第二章: 深入理解内容变换(Content ...
  • 这一系列详细讲解一下Android的Transition和Activity & Fragment Transition.相信很多童鞋对这两个概念已经不陌生,只是对它们的具体使用细节还不太了解。网上对Transition的讲解也是拼拼凑凑,并没有一个比较完整...
  • Android:Fragment Transition介绍

    千次阅读 2015-12-26 23:59:45
    什么是Transition? 安卓5.0中Activity和Fragment 变换是建立在名叫Transitions的安卓新特性之上的。这个诞生于4.4的transition框架为在不同的UI状态之间产生动画效果提供了非常方便的API。该框架主要基于两个概念:...
  • Android中的Transition(一)

    千次阅读 2017-02-27 18:36:42
    本文翻译自:Animate all the things. Transitions in Android让所有的一切都动起来谷歌在Material Design有这样一个阐述:动画不再仅是iOS才有。这里有一种新概念叫Material motion。 Motion提供了另外一层含义:...
  • 转场(transition)(新)

    2021-01-12 23:44:31
    立即注册x转场(transition)(翻译:被诅咒的章鱼)在Ren’Py中,转场(transition)可以用作 with语句 及其他语句的一部分,用于场景切换时提供各种效果。Ren’Py自带一写预定义的转场(transition)效果,可以在with语句...
  • css3 transition学习笔记

    2020-03-29 14:47:46
    css3 transition学习笔记简单了解transition兼容性可动画属性的列表是需要注意的小问题transition-property(动画指定过渡属性)transition-duration(过渡时长)transition-timing-...首先字面翻译是过渡的意思,...
  • 这是之前客户的一个需求,给的 demo 是用 gif 实现跑马灯,但是我们的没法用 gif,因为图上的文字需要翻译成各国语言,所以不能使用图片来实现,那么,自己写一个咯。 思考过程 html <li>1 <li>2 <li>3 ...
  • Transition 调用方法分析

    千次阅读 2016-06-30 15:48:10
    对使用Transition的几个方法进行简单的分析,易于之后对Transition使用的理解
  • 文章目录01.transform(转换) 和 translate02.transition(过渡) 01.transform(转换) 和 translate transform的中文翻译是变换、变形,是css3的一个属性,和其他width,height属性一样 translate 是transform的属性值...
  • transform、transition、 translate...translation: 中文为 翻译 translation: 即不是css属性,也不是属性值 transform: css 属性名 transition : css 属性名 translate: css属性值 transition 设置元素 –...
  • 大学英语综合教程四 Unit 2课文内容英译中 中英翻译   大家好,我叫亓官劼(qí guān jié ),在CSDN中记录学习的点滴历程,时光荏苒,未来可期,加油~博客地址为:亓官劼的博客 本文原创为亓官劼,请大家...
  • 之前翻译了两篇有关CSS动画的文章,这篇正好可以用来复习,这是写这篇文章的主要目的。同时,也将从原理上讲解如何从零打造一个无限轮播图,这个过程并不会很复杂。 轮播图的实现方式有很多种,比如有通过 js 控制...
  • transition翻译成中文是过渡的意思,顾名思义,它就是专门做过渡动画的,比如一些放大缩小,隐藏显示等,下面我们一起来学习一下他的语法。 transition-duration:transition效果需要指定多少秒或毫秒才能完成 ...
  • 我们通常将依存句法的特征融入到其他任务模型里,比如机器翻译、意见挖掘、语篇分析等,一般能得到更好的性能。 那怎么得到依存句法特征呢?通常有两种方法: 将依存句法树喂给递归神经网络,得到的隐层表示...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,653
精华内容 4,261
关键字:

transition的翻译