【taro react】 ---- 常用自定义 React Hooks 的实现【六】之类渐入动画效果的轮播

1. 效果

2. 场景

1. css 效果实现：可以看到效果图中就是一个图片从小到大的切换动画效果，这个效果很简单，使用 css 的 transform 的 scale 来实现图片的从小到大的效果，切换就更加简单了，不管是 opacity 还是 visibility 都可以实现图片的隐藏和显示的切换。
2. React.Children.map ：使用 React.Children.map 获取子元素，然后给子元素添加一层，在添加这一层实现 css 的动画效果。

3. 获取子元素列表和数量

3.1 实现分析

1. 申明一个子元素计数器 childCount；
2. 调用 React.Children.map 函数对 props.children 进行处理；
3. 调用 React.isValidElement 判断是否是 react 元素，不是就直接返回 null；
4. 是就计数器 childCount 累加，同时返回子元素；
5. 最后返回处理后的子元素