Taro React component usage (11) —— RuiNoticebar bulletin board

1. Demand Analysis

1. Used to display a group of message notifications in a loop;
2. Notify that the rendering of the message is complete, and obtain the length of the message and the length of the box;
3. Use [taro react]----get the position and width and height of the element to asynchronously get the content and the width and height information of the box;
4. Realize the movement of content through CSS3 animation;
5. Note: The length of the first movement and the second movement are different, so you need to monitor the first animation to complete onAnimationEnd.

2. Get the width and height information of the element asynchronously

import { createSelectorQuery } from '@tarojs/taro';
function isWindow(val){
  return val === window
}

export const getRect = (elementRef) => {
  const element = elementRef
  // 判断传入元素是否是window窗口，是window窗口，直接获取窗口的宽高
  if (isWindow(element)) {
    const width = element.innerWidth
    const height = element.innerHeight

    return {
      top: 0,
      left: 0,
      right: width,