Taro React组件使用（11） —— RuiNoticebar 公告栏

1. 需求分析

1. 用于循环播放展示一组消息通知；
2. 通知消息渲染完成，获取消息的长度和盒子的长度；
3. 使用【taro react】---- 获取元素的位置和宽高等信息异步获取内容和盒子的宽高信息；
4. 通过 CSS3 的 animation 实现内容的移动；
5. 注意：第一次移动和第二次移动的长度不相同，因此需要监听第一次动画完成 onAnimationEnd。

2. 异步获取元素的宽高信息

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,