How to implement animation transition effect on the front end

Introduction
Traditional transition animation
CSS transition animation
js animation
Comparison between traditional and Vue/React frameworks
Transition animation under Vue framework

Transition Component
modules/transition

Transition animation in React

Data-driven animation

Introduction

The concept of animation is very broad and involves various fields. Here we narrow the scope to the front-end web application level, not to mention Animate in the game field. Let's start from the simplest.

Currently, most web applications are developed based on frameworks, such as Vue, React, etc. They are all based on data-driven views. So let’s compare how we implemented animation or transition effects when these frameworks did not exist, and how to achieve them using data-driven.

Traditional transition animation

Animation effects play a very important role in the experience, but for many developers, they may be a very weak link. After the emergence of CSS3, the most commonly used animation transition for many beginners may be the ability of CSS3.

CSS transition animation

It is very simple to start the transition animation with CSS. Just write the transition attribute. Here is a demo

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

.normal {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: all 0.3s;
}
.normal:hover {
  background-color: yellow;
  width: 200px;
  height: 200px;
}

The effect is still very good. CSS3 transition basically meets most animation requirements. If it is not satisfied, there is also real CSS3 animation.

animate-css

The famous CSS animation library, everyone who uses it knows it.

Whether it is CSS3 transition or CSS3 animation, we simply use it by switching the class name. If you want to do callback processing, the browser also provides animation frame events such as ontransitionend and onanimationend, which can be listened to through the JS interface.

var el = document.querySelector('#app')
el.addEventListener('transitionstart', () => {
  console.log('transition start')
})
el.addEventListener('transitionend', () => {
  console.log('transition end')
})

Ok, this is the basis of CSS animation. Most animation transition requirements can also be achieved through JS encapsulation, but the limitation is that it can only control the attribute animation supported by CSS, and the control is relatively weak.

js animation

After all, js is a custom coding program, so it has powerful control over animations and can achieve various effects that CSS does not support. So what is the basis for implementing animation in js?
Simply put, animation is to continuously update the properties of an element on the timeline, and then let the browser redraw it, which becomes an animation visually. Without further ado, let's start with an example:

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

// Tween is just an easing function var el = document.querySelector('#app')
var time = 0, begin = 0, change = 500, duration = 1000, fps = 1000 / 60;
function startSport() {
  var val = Tween.Elastic.easeInOut(time, begin, change, duration);
  el.style.transform = 'translateX(' + val + 'px)';
  if (time <= duration) {
    time += fps
  } else {
    console.log('Animation ends and restarts')
    time = 0;
  }
  setTimeout(() => {
    startSport()
  }, fps)
}
startSport()

Continuously updating properties on the timeline can be achieved through setTimeout or requestAnimation. As for the Tween easing function, it is similar to the concept of interpolation. Given a series of variables, you can get the value at any time in the interval. It is a pure mathematical formula and is used by almost all animation frameworks. If you want to know more, you can refer to Zhang Xinxu's Tween.js

OK, this minimalist demo is also the core foundation of js animation. You can see that we perfectly control the generation process of transition values through the program. All other complex animation mechanisms follow this pattern.

Comparison between traditional and Vue/React frameworks

Through the previous examples, whether it is CSS transition or JS transition, we directly obtain the DOM element and then perform attribute operations on the DOM element.
Both Vue and React introduce the concept of virtual DOM. Data drives the view. We try not to operate DOM and only control data. So how do we drive animation at the data level?

Transition animation under Vue framework

You can read the document first

Vue transition animation

We will not talk about how to use it, let's analyze how the transition component provided by Vue implements animation transition support.

Transition Component

First look at the transition component code, path "src/platforms/web/runtime/components/transition.js"
The core code is as follows:

// Auxiliary function, copy props data export function extractTransitionData (comp: Component): Object {
 const data = {}
 const options: ComponentOptions = comp.$options
 // props
 for (const key in options.propsData) {
  data[key] = comp[key]
 }
 // events.
 const listeners: ?Object = options._parentListeners
 for (const key in listeners) {
  data[camelize(key)] = listeners[key]
 }
 return data
}

export default {
 name: 'transition',
 props: transitionProps,
 abstract: true, // Abstract component, which means it will not be rendered into DOM, to assist in developing render (h: Function) {
  // Get the real rendering element children through slots
  let children: any = this.$slots.default
  
  const mode: string = this.mode

  const rawChild: VNode = children[0]

  // Add a unique key
  // component instance. This key will be used to remove pending leaving nodes
  // during entering.
  const id: string = `__transition-${this._uid}-`
  child.key = getKey(id)
    : child.key
  // Inject the transition attribute into data to save the data passed through props const data: Object = (child.data || (child.data = {})).transition = extractTransitionData(this)
  const oldRawChild: VNode = this._vnode
  const oldChild: VNode = getRealChild(oldRawChild)

  
   // important for dynamic transitions!
   const oldData: Object = oldChild.data.transition = extend({}, data)
 // handle transition mode
   if (mode === 'out-in') {
    // return placeholder node and queue update when leave finishes
    this._leaving = true
    mergeVNodeHook(oldData, 'afterLeave', () => {
     this._leaving = false
     this.$forceUpdate()
    })
    return placeholder(h, rawChild)
   } else if (mode === 'in-out') {
    let delayedLeave
    const performLeave = () => { delayedLeave() }
    mergeVNodeHook(data, 'afterEnter', performLeave)
    mergeVNodeHook(data, 'enterCancelled', performLeave)
    mergeVNodeHook(oldData, 'delayLeave', leave => { delayedLeave = leave })
   }
  return rawChild
 }
}

As you can see, the function of this component itself is relatively simple. It gets the children of the elements that need to be rendered through slots, and then copies the props attribute data of transition to the transition attribute of data for subsequent injection into the life cycle. mergeVNodeHook is used for life cycle management.

modules/transition

Then look down at the life cycle related path:
src/platforms/web/runtime/modules/transition.js
Let’s look at the default export first:

function _enter (_: any, vnode: VNodeWithData) {
 if (vnode.data.show !== true) {
  enter(vnode)
 }
}
export default inBrowser ? {
 create: _enter,
 activate: _enter,
 remove (vnode: VNode, rm: Function) {
  if (vnode.data.show !== true) {
   leave(vnode, rm)
  } 
 }
} : {}

Here inBrowser is regarded as true, because we are analyzing the browser environment.
Next, let's look at the enter and leave functions. Let's look at enter first:

export function addTransitionClass (el: any, cls: string) {
 const transitionClasses = el._transitionClasses || (el._transitionClasses = [])
 if (transitionClasses.indexOf(cls) < 0) {
  transitionClasses.push(cls)
  addClass(el, cls)
 }
}

export function removeTransitionClass (el: any, cls: string) {
 if (el._transitionClasses) {
  remove(el._transitionClasses, cls)
 }
 removeClass(el, cls)
}
export function enter (vnode: VNodeWithData, toggleDisplay: ?() => void) {
 const el: any = vnode.elm

 // call leave callback now
 if (isDef(el._leaveCb)) {
  el._leaveCb.cancelled = true
  el._leaveCb()
 }
 // The transition data injected into data in the previous step const data = resolveTransition(vnode.data.transition)
 if (isUndef(data)) {
  return
 }

 /* istanbul ignore if */
 if (isDef(el._enterCb) || el.nodeType !== 1) {
  return
 }

 const {
  css,
  type,
  enterClass,
  enterToClass,
  enterActiveClass,
  appearClass,
  appearToClass,
  appearActiveClass,
  beforeEnter,
  enter,
  afterEnter,
  enterCancelled,
  beforeAppear,
  appear,
  afterAppear,
  appearCancelled,
  duration
 } = data

 
 let context = activeInstance
 let transitionNode = activeInstance.$vnode

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

 if (isAppear && !appear && appear !== '') {
  return
 }
 // Get the className that should be injected at the right time
 const startClass = isAppear && appearClass
  ?appearClass
  :enterClass
 const activeClass = isAppear && appearActiveClass
  ?appearActiveClass
  :enterActiveClass
 const toClass = isAppear && appearToClass
  ?appearToClass
  :enterToClass

 const beforeEnterHook = isAppear
  ? (beforeAppear || beforeEnter)
  : beforeEnter
 const enterHook = isAppear
  ? (typeof appear === 'function' ? appear : enter)
  : enter
 const afterEnterHook = isAppear
  ? (afterAppear || afterEnter)
  :afterEnter
 const enterCancelledHook = isAppear
  ? (appearCancelled || enterCancelled)
  :enterCancelled

 const explicitEnterDuration: any = toNumber(
  isObject(duration)
   ? duration.enter
   : duration
 )

 const expectsCSS = css !== false && !isIE9
 const userWantsControl = getHookArgumentsLength(enterHook)
 // Callback processing after the transition ends, delete the class when entering
 const cb = el._enterCb = once(() => {
  if (expectsCSS) {
   removeTransitionClass(el, toClass)
   removeTransitionClass(el, activeClass)
  }
  if (cb.cancelled) {
   if (expectsCSS) {
    removeTransitionClass(el, startClass)
   }
   enterCancelledHook && enterCancelledHook(el)
  } else {
   afterEnterHook && afterEnterHook(el)
  }
  el._enterCb = null
 })


 // When DOM enters, add start class for transition beforeEnterHook && beforeEnterHook(el)
 if (expectsCSS) {
  // Set the default style before the transition starts addTransitionClass(el, startClass)
  addTransitionClass(el, activeClass)
  // The browser renders the next frame and deletes the default style and adds toClass
  // Add end event listener, the callback is cb above
  nextFrame(() => {
   removeTransitionClass(el, startClass)
   if (!cb.cancelled) {
    addTransitionClass(el, toClass)
    if (!userWantsControl) {
     if (isValidDuration(explicitEnterDuration)) {
      setTimeout(cb, explicitEnterDuration)
     } else {
      whenTransitionEnds(el, type, cb)
     }
    }
   }
  })
 }

 if (vnode.data.show) {
  toggleDisplay && toggleDisplay()
  enterHook && enterHook(el, cb)
 }

 if (!expectsCSS && !userWantsControl) {
  cb()
 }
}

Enter uses a function whenTransitionEnds, which actually monitors the event of transition or animation end:

export let transitionEndEvent = 'transitionend'
export let animationEndEvent = 'animationend'
export function whenTransitionEnds (
 el: Element,
 expectedType: ?string,
 cb: Function
) {
 const { type, timeout, propCount } = getTransitionInfo(el, expectedType)
 if (!type) return cb()
 const event: string = type === TRANSITION ? transitionEndEvent : animationEndEvent
 let ended = 0
 const end = () => {
  el.removeEventListener(event, onEnd)
  cb()
 }
 const onEnd = e => {
  if (e.target === el) {
   if (++ended >= propCount) {
    end()
   }
  }
 }
 setTimeout(() => {
  if (ended < propCount) {
   end()
  }
 }, timeout + 1)
 el.addEventListener(event, onEnd)
}

OK, here we come, according to the comment analysis of the source code above, we can find:

Vue first encapsulates a series of auxiliary methods such as addClass/removeClass for operating dom className.
Then after the life cycle enterHook, startClass, which is the default initial style of enterClass, and activeClass are immediately set
Then in the next frame of the browser nextFrame, startClass is removed, toClass is added, and the end event listener for the transition animation is added.
After listening to the end event, cb is called to remove toClass and activeClass

The process of leave is the same as that of enter, except that className is added and removed in reverse.

Conclusion: Vue's animation transition processing method is essentially the same as traditional DOM, but it is integrated into Vue's various life cycles for processing. In essence, it is still processed when DOM is added or deleted.

Transition animation in React

Oh, we flipped through the React documentation and didn’t find any transition animation processing. Hey, it seems that it is not officially supported natively.

But we can implement it ourselves, such as maintaining a state through useState, and switching className according to the state in render, but what should we do if it is complicated?

Fortunately, I found a wheel plug-in react-transition-group in the community
Well, just paste the source code directly. With the previous analysis of Vue, this is very easy to understand, but even simpler:

class Transition extends React.Component {
 static contextType = TransitionGroupContext

 constructor(props, context) {
  super(props, context)
  let parentGroup = context
  let appear =
   parentGroup && !parentGroup.isMounting ? props.enter : props.appear

  let initialStatus

  this.appearStatus = null

  if (props.in) {
   if (appear) {
    initialStatus = EXITED
    this.appearStatus = ENTERING
   } else {
    initialStatus = ENTERED
   }
  } else {
   if (props.unmountOnExit || props.mountOnEnter) {
    initialStatus = UNMOUNTED
   } else {
    initialStatus = EXITED
   }
  }

  this.state = { status: initialStatus }

  this.nextCallback = null
 }

 // When initializing DOM, update the default initial state componentDidMount() {
  this.updateStatus(true, this.appearStatus)
 }
 // When data is updated, update the corresponding state componentDidUpdate(prevProps) {
  let nextStatus = null
  if (prevProps !== this.props) {
   const { status } = this.state

   if (this.props.in) {
    if (status !== ENTERING && status !== ENTERED) {
     nextStatus = ENTERING
    }
   } else {
    if (status === ENTERING || status === ENTERED) {
     nextStatus = EXITING
    }
   }
  }
  this.updateStatus(false, nextStatus)
 }

 updateStatus(mounting = false, nextStatus) {
  if (nextStatus !== null) {
   // nextStatus will always be ENTERING or EXITING.
   this.cancelNextCallback()

   if (nextStatus === ENTERING) {
    this.performEnter(mounting)
   } else {
    this.performExit()
   }
  } else if (this.props.unmountOnExit && this.state.status === EXITED) {
   this.setState({ status: UNMOUNTED })
  }
 }

 performEnter(mounting) {
  const { enter } = this.props
  const appearing = this.context ? this.context.isMounting : mounting
  const [maybeNode, maybeAppearing] = this.props.nodeRef
   ? [appearing]
   : [ReactDOM.findDOMNode(this), appearing]

  const timeouts = this.getTimeouts()
  const enterTimeout = appearing ? timeouts.appear : timeouts.enter
  // no enter animation skip right to ENTERED
  // if we are mounting and running this it means appear _must_ be set
  if ((!mounting && !enter) || config.disabled) {
   this.safeSetState({ status: ENTERED }, () => {
    this.props.onEntered(maybeNode)
   })
   return
  }

  this.props.onEnter(maybeNode, maybeAppearing)

  this.safeSetState({ status: ENTERING }, () => {
   this.props.onEntering(maybeNode, maybeAppearing)

   this.onTransitionEnd(enterTimeout, () => {
    this.safeSetState({ status: ENTERED }, () => {
     this.props.onEntered(maybeNode, maybeAppearing)
    })
   })
  })
 }

 performExit() {
  const { exit } = this.props
  const timeouts = this.getTimeouts()
  const maybeNode = this.props.nodeRef
   ? undefined
   : ReactDOM.findDOMNode(this)

  // no exit animation skip right to EXITED
  if (!exit || config.disabled) {
   this.safeSetState({ status: EXITED }, () => {
    this.props.onExited(maybeNode)
   })
   return
  }

  this.props.onExit(maybeNode)

  this.safeSetState({ status: EXITING }, () => {
   this.props.onExiting(maybeNode)

   this.onTransitionEnd(timeouts.exit, () => {
    this.safeSetState({ status: EXITED }, () => {
     this.props.onExited(maybeNode)
    })
   })
  })
 }

 cancelNextCallback() {
  if (this.nextCallback !== null) {
   this.nextCallback.cancel()
   this.nextCallback = null
  }
 }

 safeSetState(nextState, callback) {
  // This shouldn't be necessary, but there are weird race conditions with
  // setState callbacks and unmounting in testing, so always make sure that
  // we can cancel any pending setState callbacks after we unmount.
  callback = this.setNextCallback(callback)
  this.setState(nextState, callback)
 }

 setNextCallback(callback) {
  let active = true

  this.nextCallback = event => {
   if (active) {
    active = false
    this.nextCallback = null

    callback(event)
   }
  }

  this.nextCallback.cancel = () => {
   active = false
  }

  return this.nextCallback
 }
 // Listen for transition end
 onTransitionEnd(timeout, handler) {
  this.setNextCallback(handler)
  const node = this.props.nodeRef
   ? this.props.nodeRef.current
   : ReactDOM.findDOMNode(this)

  const doesNotHaveTimeoutOrListener =
   timeout == null && !this.props.addEndListener
  if (!node || doesNotHaveTimeoutOrListener) {
   setTimeout(this.nextCallback, 0)
   return
  }

  if (this.props.addEndListener) {
   const [maybeNode, maybeNextCallback] = this.props.nodeRef
    ? [this.nextCallback]
    : [node, this.nextCallback]
   this.props.addEndListener(maybeNode, maybeNextCallback)
  }

  if (timeout != null) {
   setTimeout(this.nextCallback, timeout)
  }
 }

 render() {
  const status = this.state.status

  if (status === UNMOUNTED) {
   return null
  }

  const {
   children,
   // filter props for `Transition`
   in: _in,
   mountOnEnter: _mountOnEnter,
   unmountOnExit: _unmountOnExit,
   appear: _appear,
   enter: _enter,
   exit: _exit,
   timeout: _timeout,
   addEndListener: _addEndListener,
   onEnter: _onEnter,
   onEntering: _onEntering,
   onEntered: _onEntered,
   onExit: _onExit,
   onExiting: _onExiting,
   onExited: _onExited,
   nodeRef: _nodeRef,
   ...childProps
  } = this.props

  return (
   // allows for nested Transitions
   <TransitionGroupContext.Provider value={null}>
    {typeof children === 'function'
     ? children(status, childProps)
     : React.cloneElement(React.Children.only(children), childProps)}
   </TransitionGroupContext.Provider>
  )
 }
}

As you can see, it is very similar to Vue, except that it is processed in various life cycle functions of React.

At this point, we will find that both the Vue transiton component and the React transiton-group component focus on the animation of CSS attributes.

Data-driven animation

In actual scenes, you will always encounter animations that CSS cannot handle. At this time, there are two solutions:

Get dom through ref, and then adopt our traditional js solution.
Maintain the data of drawing DOM through state state, and continuously update the state class through setState to drive the view to refresh automatically

The above is the details of how to implement animation transition effects on the front end. For more information about how to implement animation transition effects on the front end, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:

Vue implements transition animation of list scrolling
Vue solves the problem of routing transition animation jitter (detailed example)
Solve the problem that vue's transition animation cannot be implemented normally
vue-router realizes navigation switching transition animation effect
Use vue-router to set transition animation when switching pages
Use transition and transition-group in vue components to implement transition animation
Vue uses transition to implement transition animation
Detailed explanation of Vue animation events and transition animation examples
Analysis of basic transition animation and implementation principles in Vue

<<: Install multiple versions of PHP for Nginx on Linux

>>: Detailed explanation of the limitations and restrictions of MySQL partitioned tables