フロントエンドにアニメーション遷移効果を実装する方法

<div id="app" class="normal"></div>

。普通 {
  幅: 100ピクセル;
  高さ: 100px;
  背景色: 赤;
  遷移: すべて 0.3 秒;
}
.normal:hover {
  背景色: 黄色;
  幅: 200ピクセル;
  高さ: 200px;
}

var el = document.querySelector('#app')
el.addEventListener('transitionstart', () => {
  console.log('遷移開始')
})
el.addEventListener('transitionend', () => {
  console.log('遷移終了')
})

 <div id="app" class="normal"></div>

// Tween は単なるイージング関数です var el = document.querySelector('#app')
var time = 0、begin = 0、change = 500、duration = 1000、fps = 1000 / 60;
関数 startSport() {
  var val = Tween.Elastic.easeInOut(時間、開始、変更、継続時間);
  el.style.transform = 'translateX(' + val + 'px)';
  時間 <= 継続時間の場合
    時間 += fps
  } それ以外 {
    console.log('アニメーションが終了し、再開します')
    時間 = 0;
  }
  タイムアウトを設定する(() => {
    スポーツを始める()
  }, fps)
}
スポーツを始める()

// 補助関数、propsデータをコピーするエクスポート関数 extractTransitionData (comp: Component): Object {
 定数データ = {}
 const オプション: ComponentOptions = comp.$options
 // 小道具
 for (const キー in options.propsData) {
  データ[キー] = comp[キー]
 }
 // イベント。
 定数リスナー: ?Object = options._parentListeners
 for (const キー in リスナー) {
  data[camelize(キー)] = listeners[キー]
 }
 データを返す
}

エクスポートデフォルト{
 名前: 'transition'、
 プロパティ: transitionProps、
 abstract: true, // 抽象コンポーネント。DOM にレンダリングされないことを意味し、開発に役立ちます render (h: Function) {
  // スロットを通じて実際のレンダリング要素の子要素を取得します
  子: any = this.$slots.default とします。
  
  定数モード: 文字列 = this.mode

  定数rawChild: VNode = children[0]

  // 一意のキーを追加する
  // コンポーネントインスタンス。このキーは保留中の離脱ノードを削除するために使用されます
  // 入力中。
  定数 id: 文字列 = `__transition-${this._uid}-`
  子.key = getKey(id)
    : 子.キー
  // props を通じて渡されたデータを保存するため、transition 属性をデータに挿入します。const data: Object = (child.data || (child.data = {})).transition = extractTransitionData(this)
  const oldRawChild: VNode = this._vnode
  定数 oldChild: VNode = getRealChild(oldRawChild)

  
   // 動的な遷移にとって重要です!
   const oldData: オブジェクト = oldChild.data.transition = extend({}, data)
 // 遷移モードを処理する
   if (mode === 'out-in') {
    // プレースホルダーノードを返し、終了時にキューの更新を行う
    this._leaving = true
    mergeVNodeHook(oldData, 'afterLeave', () => {
     this._leaving = false
     this.$forceUpdate()
    })
    プレースホルダー(h, rawChild)を返す
   } それ以外の場合 (モード === 'in-out') {
    遅延させる
    const performLeave = () => { delayedLeave() }
    mergeVNodeHook(データ、'afterEnter'、performLeave)
    mergeVNodeHook(データ、'enterCancelled'、performLeave)
    mergeVNodeHook(oldData、'delayLeave'、leave => { delayedLeave = leave })
   }
  rawChildを返す
 }
}

関数 _enter (_: 任意、vnode: VNodeWithData) {
 (vnode.data.show !== true) の場合 {
  入力(vnode)
 }
}
デフォルトの inBrowser をエクスポートしますか? {
 作成: _enter、
 アクティブ化: _enter、
 削除 (vnode: VNode、rm: 関数) {
  (vnode.data.show !== true) の場合 {
   退出(vnode, rm)
  } 
 }
} : {}

エクスポート関数 addTransitionClass (el: any, cls: string) {
 const transitionClasses = el._transitionClasses || (el._transitionClasses = [])
 （遷移クラスのインデックス（cls）<0）の場合）{
  遷移クラス.push(cls)
  クラスを追加します(el, cls)
 }
}

エクスポート関数removeTransitionClass(el: any, cls: string) {
 if (el._transitionClasses) {
  削除(el._transitionClasses、cls)
 }
 クラスを削除します(el, cls)
}
エクスポート関数 enter (vnode: VNodeWithData, toggleDisplay: ?() => void) {
 定数 el: 任意 = vnode.elm

 // 今すぐLeaveコールバックを呼び出す
 if (isDef(el._leaveCb)) {
  el._leaveCb.cancelled = true
  el._leaveCb()
 }
 // 前のステップでデータに注入された遷移データ const data = resolveTransition(vnode.data.transition)
 if (isUndef(データ)) {
  戻る
 }

 /* イスタンブールは無視します */
 if (isDef(el._enterCb) || el.nodeType !== 1) {
  戻る
 }

 定数{
  css、
  タイプ、
  入力クラス、
  クラスに入る、
  アクティブクラスを入力、
  表示クラス、
  表示されるクラス、
  アクティブクラスを表示、
  入る前、
  入力、
  入力後、
  キャンセルされました、
  前に現れる、
  現れる、
  出現後、
  表示キャンセル、
  間隔
 } = データ

 
 コンテキストをactiveInstanceにする
 transitionNode = activeInstance.$vnode とします。

 const isAppear = !context._isMounted || !vnode.isRootInsert

 if (isAppear && !appear && appear !== '') {
  戻る
 }
 // 適切なタイミングで注入するクラス名を取得します
 const startClass = isAppear && appearClass
  ?表示クラス
  :クラスを入力
 定数 activeClass = isAppear && appearActiveClass
  ?appearActiveClass
  :アクティブクラスを入力
 定数 toClass = isAppear && appearToClass
  ?クラスに現れる
  :クラスに入る

 定数 beforeEnterHook = isAppear
  ? (表示される前 || 入力する前)
  : 前に入る
 const enterHook = isAppear
  ? (typeof appear === 'function' ? appear : enter)
  ： 入力
 定数 afterEnterHook = isAppear
  ? (afterAppear || afterEnter)
  :afterEnter
 const enterCancelledHook = isAppear
  ? (キャンセル表示 || キャンセル入力)
  :enterキャンセル

 定数明示的入力期間: 任意 = toNumber(
  isObject(期間)
   ? 期間.入力
   ： 間隔
 ）

 const expectsCSS = css !== false && !isIE9
 const userWantsControl = getHookArgumentsLength(enterHook)
 // 遷移終了後のコールバック処理、遷移時にクラスを削除する
 const cb = el._enterCb = once(() => {
  if (expectsCSS) {
   トランジションクラスの削除(el, toClass)
   トランジションクラスの削除(el, アクティブクラス)
  }
  cb.cancelledの場合{
   if (expectsCSS) {
    トランジションクラスの削除(el, 開始クラス)
   }
   キャンセルされたフックを入力 && キャンセルされたフックを入力(el)
  } それ以外 {
   afterEnterHook && afterEnterHook(el)
  }
  el._enterCb = null
 })


 // DOM に入るときに、遷移の開始クラスを追加します beforeEnterHook && beforeEnterHook(el)
 if (expectsCSS) {
  // トランジションが始まる前にデフォルトのスタイルを設定します addTransitionClass(el, startClass)
  トランジションクラスを追加します(el、アクティブクラス)
  // ブラウザは次のフレームをレンダリングし、デフォルトのスタイルを削除してtoClassを追加します
  // 終了イベントリスナーを追加します。コールバックは上記の cb です。
  次のフレーム(() => {
   トランジションクラスの削除(el, 開始クラス)
   キャンセルされた場合
    遷移クラスを追加します(el, toClass)
    if (!userWantsControl) {
     if (isValidDuration(explicitEnterDuration)) {
      setTimeout(cb、明示的なEnterDuration)
     } それ以外 {
      遷移終了時(el, タイプ, cb)
     }
    }
   }
  })
 }

 (vnode.data.show) の場合 {
  トグルディスプレイ && トグルディスプレイ()
  エンターフック && エンターフック(el, cb)
 }

 if (!expectsCSS && !userWantsControl) {
  関数
 }
}

エクスポート let transitionEndEvent = 'transitionend'
エクスポート let animationEndEvent = 'animationend'
エクスポート関数 whenTransitionEnds (
 el: 要素、
 予想される型: ?文字列、
 cb: 機能
）{
 const { type, timeout, propCount } = getTransitionInfo(el, expectedType)
 if (!type) が cb() を返す
 const イベント: 文字列 = type === TRANSITION ? transitionEndEvent : animationEndEvent
 終了 = 0
 定数終了 = () => {
  el.removeEventListener(イベント、onEnd)
  cb()
 }
 定数onEnd = e => {
  （e.target === el）の場合{
   if (++ended >= propCount) {
    終わり（）
   }
  }
 }
 タイムアウトを設定する(() => {
  if (終了 < propCount) {
   終わり（）
  }
 }, タイムアウト + 1)
 el.addEventListener(イベント、onEnd)
}

クラスTransitionはReact.Componentを拡張します。
 静的コンテキストタイプ = TransitionGroupContext

 コンストラクタ(props, context) {
  super(プロパティ、コンテキスト)
  親グループ = コンテキスト
  出現させる =
   親グループ && !parentGroup.isMounting ? props.enter : props.appear

  初期ステータス

  this.appearStatus = null

  もし（props.in）{
   （現れる）場合{
    初期ステータス = 終了
    this.appearStatus = 入力中
   } それ以外 {
    初期ステータス = 入力済み
   }
  } それ以外 {
   props.unmountOnExit の場合 || props.mountOnEnter の場合 {
    初期ステータス = マウント解除
   } それ以外 {
    初期ステータス = 終了
   }
  }

  this.state = { ステータス: 初期ステータス }

  this.nextCallback = null
 }

 // DOMを初期化するときに、デフォルトの初期状態を更新します。componentDidMount() {
  this.updateStatus(true、this.appearStatus) は、
 }
 // データが更新されたら、対応する状態を更新します。componentDidUpdate(prevProps) {
  nextStatus = null とする
  if (prevProps !== this.props) {
   const { ステータス } = this.state

   if (this.props.in) {
    if (ステータス !== 入力中 && ステータス !== 入力済み) {
     nextStatus = 入力中
    }
   } それ以外 {
    if (ステータス === 入力中 || ステータス === 入力済み) {
     nextStatus = 終了
    }
   }
  }
  this.updateStatus(false、nextStatus) は、
 }

 updateStatus(マウント = false、nextStatus) {
  if (nextStatus !== null) {
   // nextStatus は常に ENTERING または EXITING になります。
   this.cancelNextCallback()

   if (nextStatus === ENTERING) {
    this.performEnter(マウント)
   } それ以外 {
    this.performExit()
   }
  } そうでない場合 (this.props.unmountOnExit && this.state.status === EXITED) {
   this.setState({ ステータス: マウント解除 })
  }
 }

 performEnter(マウント) {
  const { 入力 } = this.props
  const 出現 = this.context ? this.context.isMounting : マウント
  const [maybeNode, maybeAppearing] = this.props.nodeRef
   ? [登場]
   : [ReactDOM.findDOMNode(this)、出現]

  定数タイムアウト = this.getTimeouts()
  const enterTimeout = 表示される? timeouts.appear: timeouts.enter
  // ENTERアニメーションなし ENTEREDへ右にスキップ
  // これをマウントして実行する場合、appear を設定する必要があります
  if ((!マウント && !enter) || config.disabled) {
   this.safeSetState({ ステータス: ENTERED }, () => {
    this.props.onEntered(おそらくNode)
   })
   戻る
  }

  this.props.onEnter(おそらくノード、おそらく表示される)

  this.safeSetState({ ステータス: ENTERING }, () => {
   this.props.onEntering(おそらくノード、おそらく表示される)

   this.onTransitionEnd(enterTimeout, () => {
    this.safeSetState({ ステータス: ENTERED }, () => {
     this.props.onEntered(おそらくノード、おそらく表示される)
    })
   })
  })
 }

 終了する() {
  const { exit } = this.props
  定数タイムアウト = this.getTimeouts()
  const maybeNode = this.props.nodeRef
   ？ 未定義
   : ReactDOM.findDOMNode(これ)

  // 終了アニメーションなし、EXITED へすぐにスキップ
  if (!exit || config.disabled) {
   this.safeSetState({ ステータス: EXITED }, () => {
    this.props.onExited(おそらくNode)
   })
   戻る
  }

  this.props.onExit(おそらくNode)

  this.safeSetState({ ステータス: 終了 }, () => {
   this.props.onExiting(おそらくNode)

   this.onTransitionEnd(timeouts.exit, () => {
    this.safeSetState({ ステータス: EXITED }, () => {
     this.props.onExited(おそらくNode)
    })
   })
  })
 }

 キャンセルネクストコールバック() {
  if (this.nextCallback !== null) {
   this.nextCallback.cancel()
   this.nextCallback = null
  }
 }

 safeSetState(nextState, コールバック) {
  // これは必要ないはずですが、奇妙な競合状態が発生します
  // テストではsetStateコールバックとアンマウントが実行される可能性があるため、常に
  // アンマウント後に保留中の setState コールバックをキャンセルできます。
  コールバック = this.setNextCallback(コールバック)
  this.setState(nextState, コールバック)
 }

 setNextCallback(コールバック) {
  アクティブ = true にする

  this.nextCallback = イベント => {
   （アクティブ）の場合{
    アクティブ = 偽
    this.nextCallback = null

    コールバック(イベント)
   }
  }

  this.nextCallback.cancel = () => {
   アクティブ = 偽
  }

  this.nextCallback を返す
 }
 // 遷移終了をリッスンする
 onTransitionEnd(タイムアウト、ハンドラー) {
  this.setNextCallback(ハンドラ)
  定数ノード = this.props.nodeRef
   ? this.props.nodeRef.current
   : ReactDOM.findDOMNode(これ)

  const タイムアウトまたはリスナーがない =
   タイムアウト == null && !this.props.addEndListener
  if (!node || タイムアウトまたはリスナーがない場合) {
   setTimeout(this.nextCallback, 0)
   戻る
  }

  if (this.props.addEndListener) {
   const [maybeNode, maybeNextCallback] = this.props.nodeRef
    ? [this.nextCallback]
    : [ノード、this.nextCallback]
   this.props.addEndListener(おそらくNode、おそらくNextCallback)
  }

  タイムアウトが null の場合
   setTimeout(this.nextCallback、タイムアウト)
  }
 }

 与える（） {
  定数ステータス = this.state.status

  if (ステータス === マウント解除) {
   nullを返す
  }

  定数{
   子供たち、
   // `Transition` のフィルタープロパティ
   中: _in,
   マウントオンEnter: _マウントオンEnter、
   アンマウント時終了: _unmountOnExit,
   表示される: _表示される,
   入力: _enter,
   終了: _exit,
   タイムアウト: _timeout、
   終了リスナーを追加: _終了リスナーを追加、
   オンエンター: _オンエンター、
   入力時: _入力時、
   入力時: _onEntered,
   終了時: _onExit、
   終了時: _onExiting、
   終了時: _onExited,
   ノード参照: _nodeRef,
   ...子プロパティ
  } = this.props

  戻る （
   // ネストされた遷移を可能にする
   <TransitionGroupContext.Provider 値 = {null}>
    {typeof children === 'function'
     ? 子(ステータス、子プロパティ)
     : React.cloneElement(React.Children.only(children), childProps)}
   </TransitionGroupContext.Provider>
  ）
 }
}