【taro react】 ---- 常用自定义 React Hooks 的实现【六】之类渐入动画效果的轮播
1. 效果
2. 场景
- css 效果实现：可以看到效果图中就是一个图片从小到大的切换动画效果，这个效果很简单，使用 css 的 transform 的 scale 来实现图片的从小到大的效果，切换就更加简单了，不管是 opacity 还是 visibility 都可以实现图片的隐藏和显示的切换。
- React.Children.map ：使用 React.Children.map 获取子元素，然后给子元素添加一层，在添加这一层实现 css 的动画效果。
3. 获取子元素列表和数量
3.1 实现分析
- 申明一个子元素计数器 childCount；
- 调用 React.Children.map 函数对 props.children 进行处理；
- 调用 React.isValidElement 判断是否是 react 元素，不是就直接返回 null；
- 是就计数器 childCount 累加，同时返回子元素；
- 最后返回处理后的子元素