我有一个包含多个组件的 React 单页应用程序。对于第 5 个组件（仅在向下滚动时可见），我有一个 counter 。现在我使用 react-countup 库来实现计数器功能。但是，计数器会在页面加载后立即启动。一旦我们向下滚动到组件，是否可以开始计数。动画仅在页面加载后发生一次（这很好），但我希望计数器不会在页面加载后不久开始，而是当用户第一次向下滚动到组件时。我的代码如下所示：

    render() {
         return (
         <div className={style.componentName}>
         <h2>Heading</h2>
         <div className={style.col}>
         <div>My counter</div>
         <CountUp className={style.countup} decimals={1} start={0} end={25} suffix=" %" duration={3} />
        </div>
        </div>)}

更新代码：

    import CountUp, { startAnimation } from 'react-countup';
    import VisibilitySensor from 'react-visibility-sensor';

    class className extends Component {

        state = {
            scrollStatus: true
        };


        onVisibilityChange = isVisible => {
            if (isVisible) {
                if (this.state.scrollStatus) {
                    startAnimation(this.myCountUp);
                    this.setState({ scrollStatus: false });
                }
            }
        }
    render() {
             return (
            <div className={style.componentName}>
             <h2>Heading</h2> …

使用成帧器运动，当我悬停在作为按钮的父元素时，我想为我的 Icon 组件设置动画以旋转 90 度。

<motion.button type="button" whileHover={{scale: 1.1}}>
    Visit our Industry 
    {/*Animate this Icon to rotate 90 degrees*/}
    <Icon type="arrow-up" /> 
</motion.button>

我看到了变体的使用，但不确定如何真正将它们与whileHover.

任何帮助将不胜感激，因为这是一个新事物。

问题：

我有一个 React 功能组件，可以递归地呈现嵌套列表。那部分工作正常。

我正在努力解决的部分是让包含嵌套列表的 div 在嵌套列表（不同大小）出现和消失时具有扩展动画。

由于内容量未知，因此简单地对 max-height 属性进行动画处理是行不通的。例如，当渲染一级列表时，框架的高度可能会扩展到 100px。但是，如果将 max-height 设置为 100px，则 div 以后将无法扩展以容纳越来越多扩展的嵌套列表。

需要动画的div是：

<div className="frame"> [nested ordered lists] </div>

...不起作用的函数是名为“collapseFrame”的函数。

同样，我之前尝试过在 max-height 属性上使用 CSS 过渡，但这远不是理想的解决方案，因为它在不可预测的高度上效果不佳。所以，如果可能的话，我不想那样做。

我遵循了一个教程，并让它在没有 React 的情况下使用普通 JavaScript 工作（部分代码被注释掉），但是当将其翻译为 React 时，我不确定为什么我无法让代码工作。

目前，展开动画正在工作，但如果边框被删除或更改为白色，它将停止工作。我不知道为什么。??

** 另外，折叠动画根本不起作用。“transitioned”事件并不总是在 ref 对象上触发，有时会在它应该被删除后触发。

有人能帮助我指出正确的方向吗？

这是我的代码笔。

（我尝试将其转移到 JS Fiddle，但它不起作用）。

https://codepen.io/maiya-public/pen/ZEzoqjW

（codepen 的另一次尝试，供参考。嵌套列表出现和消失，但没有转换）。 https://codepen.io/maiya-public/pen/MWgGzBE

这是原始代码：（我认为在 codepen 上更容易理解，但粘贴到这里是为了更好的实践）。

索引.html

<div id="root">
</div>

样式.css

.frame {
    overflow:hidden;
    transition: all 0.5s ease-out;
    height:auto;
//  for some reason,without the border, not all of them will transition AND it …

我一直在努力弄清楚如何完成我认为很简单的事情（我知道......）

目标是创建一个非常小的、可重用的模态组件，我可以使用触发按钮或 w/e 在某种 HOC 中对其进行动画处理。

我正在使用 createPortal 创建它，目标是在进入/退出所述门户时添加一些简单的动画。

我已经使用 GSAP 让它工作了，但理想情况下，我希望它与 SC 一起使用，这样我就不必引入另一个动画库。

对于我的生活，我只是无法让它与 SC 一起工作，如果有人能指出我正确的方向，我会很高兴。

我在这里做了一个沙箱：https : //codesandbox.io/s/r44w9m4o5p使用 GSAP 来运行动画，它有点笨拙，但它是我想要的正确方向。

另外，使用 react-transition-group 比https://github.com/react-tools/react-move有什么好处吗？

在过去的几天里，我一直在尝试不同的 React 动画库，试图找到一种在视图（而不是路由）之间转换的解决方案，其中视图将是包装其他组件的组件等等。

到目前为止我尝试过：
react-transtition-group
react-animations
react-spring

仍然需要尝试 的react-motionTransition...

...还有更多的东西，但是所有这些，都做我需要的，除了一件事...当应用过渡/样式的每个状态时，子组件总是更新，触发重新渲染（顺便说一句，这是有道理的），除非子组件shouldComponentUpdate()返回 false，或者被包装在 PureComponent 内，这两者都不是解决方案，因为您可能（肯定）希望在过渡结束。

所有的示例都达到了它们的目的，但它们都使用功能组件或简单的字符串来进行演示，其中任何一个都不应该关心是否重新渲染，而是一个简单的修改，每次都会记录组件被渲染后，将显示它们在过渡期间渲染多次。

奇怪的是，似乎没有人关心或不知道。我发现关于此事的疑问或问题很少，尽管它非常真实，并且库对此的记录非常少。

请分享您的解决方案以避免此问题。

我使用 PanGestureHandler 和 ScrollView 编写了一个菜单。

问题是; 当 PanGestureHandler 处于活动状态时，ScrollView 的滚动不起作用。

我的意思是滑动功能有效但滚动无效。

我的期望是一起使用这两个功能。

我在下面分享了我的实现代码。

任何的想法？_

构造函数

    constructor(props) {
        super(props);
        this.state = {
            enable: true,
        };


        const dragX = new Value(0);
        const dragY = new Value(0);
        const state = new Value(-1);

        const offsetY = new Value(0);

        this.gestureHandler = event([
            {
                nativeEvent: {
                    translationX: dragX,
                    translationY: dragY,
                    offsetY,
                    state
                }
            }
        ]);

        this.transitionX = block([
            cond(
                eq(state, State.ACTIVE),
                [

                    interpolate(dragX, {
                        inputRange: [MIN_SWIPE_X, MAX_SWIPE_X],
                        outputRange: [MIN_SWIPE_X, MAX_SWIPE_X],
                        extrapolate: "clamp"
                    }),
                ],
                [

                    cond( …

我正在尝试构建一个具有左右轮播的反应本机屏幕，在轮播的每个面板中都有一个带有项目列表的垂直平面列表。最多有 8-10 个轮播面板，平面垂直平面列表中最多有 5-30 个项目，因此最多可能有 300 个呈现的项目，但通常为 100 个。

我正在调用 API 并每 2-3 秒检查一次服务器上的数据，并使用新数据设置组件中的状态。目前，此功能有效，并且子组件中的数据会按预期更新。

平面列表中的每个项目都是可单击的，这会触发在页面中启动模式弹出窗口。我遇到的问题是模态弹出窗口需要 4-5 秒才能出现和关闭。此外，当模态最终开始消失时，动画会变得不稳定，并且深色背景层在被删除时似乎会闪烁。

我首先尝试使用内置模态，还使用了react-native-modal 包，两者都是相同的。

我尝试使用 InteractionManager.runAfterInteractions 以及 shouldComponentUpdate(nextProps, nextState) 来尝试阻止我的 api 调用，直到动画完成或阻止我的 isModalVisible 状态属性在我更改它时导致重新渲染。

下面的代码，任何帮助将不胜感激。

import {
    Text,
    Button,
    StyleSheet,
    View,   
    FlatList,   
    Dimensions,
    Image,
    Animated,
    SafeAreaView,
    TouchableHighlight,
    InteractionManager,
} from 'react-native';
import React from 'react';
import Title from './Title';
import CarouselMeeting from './CarouselMeeting';
import Modal from 'react-native-modal';
import Carousel from 'react-native-snap-carousel';

class MeetingDisplay extends React.Component {
constructor(props) {
    super(props);        
    this.state = {
        raceList: [],
        meetingList: …

我有2个AnimatedAPI 问题.

1st:我可以使用以下代码从左到右显示图像.我想将图像从位置缩放X=40 (leftPadding), Y=100(topPadding), height:20, width:20到X=20, Y=10, height:250, width:300.我该如何实现这一目标？

我的代码:

import React, { Component } from 'react';
import { StyleSheet, Text, Image, Animated, Easing, View, Button } from 'react-native';

class MyTestComp extends Component {
  componentWillMount() {
    this.animatedValue = new Animated.Value(0);
  }
  buttonPress(){
  this.animatedValue.setValue(0);
    Animated.timing(this.animatedValue,{
      toValue:1,
      duration:1000,
      Easing: Easing
    }).start()
  }

  render() {

    const translateX = this.animatedValue.interpolate({
      inputRange: [0, 1],
      outputRange: [-500, 1]
    })

    const transform = [{translateX}];

    return (
      <View>
        <Text>MyTestComp</Text>
        <Animated.View …

我有一个按方块划分的屏幕，需要通过用手指连续触摸平移手势来改变它们的颜色。

起初，我认为我可以通过平移处理程序获取我手指的位置并找到哪个元素位于该位置来做到这一点，这样我就可以改变它的颜色。但它并没有像我想象的那样奏效。我被这个问题困住了，想知道你的意见。

我正在使用成帧器运动来为一页中的多个元素设置动画。由于成帧器运动没有一种简单的方法可以在元素进入视口后对其进行动画处理，因此我使用此方法：

const controls = useAnimation();
const { ref, inView } = useInView();

useEffect(() => {
    if (inView) {
      controls.start("visible");
    }
    if (!inView) {
      controls.start("hidden");
    }
  }, [controls, inView]);

const fadeFromBottom = {
    hidden: {
      opacity: 0,
      y: -5,
    },
    visible: {
      opacity: 1,
      y: 0,
      transition: {
        type: "spring",
        delay: 0.4,
      },
    },
  };

return (
<motion.section
  ref={ref}
  variants={fadeFromBottom}
  initial='hidden'
  animate={controls}
>
   <img src={image} alt='image'>
</motion.section>

然而，这种方法只允许我为每个 .jsx 文件中的一个元素设置动画。如果我想在两个部分进入视口时使用不同的动画为其设置动画，我该怎么做？例如，我如何在不同时间使用不同的动画来制作这两个部分的动画？

<motion.section
  ref={ref}
  variants={fadeFromBottom}
  initial='hidden'
  animate={controls}
>
   <img src={image} alt='image'>
</motion.section>
<motion.section …

我在使用成帧器运动使动画工作时遇到一些问题。任何帮助将不胜感激。

代码沙盒示例