Question

我的动画结束后执行函数时遇到问题。

我正在创建一个简单的ToDo应用程序，当用户想删除任务时，我希望它消失，然后调用我的函数，使用父组件中的setState完全删除它。我自己试过研究这个但是无济于事。所以问题是任务视图会立即消失，而不是等待动画完成。

deletePressed() {
    Animated.timing(
        this.state.fadeIn,
        {
        toValue: 0,
        duration: 300,
        }
    ).start(this.props.action());
}

this.props.action

deleteTask(name) {
    const temp = this.state.tasks;
    if (temp.includes(name)) {
        const indx = temp.indexOf(name);
        temp.splice(indx, 1);
        this.setState({ tasks: temp });
    }
}

Answer 1

而不是给出回调，而是调用函数本身，这就是它在动画完成之前执行的原因。这应该有用。

deletePressed() {
    Animated.timing(
        this.state.fadeIn,
        {
        toValue: 0,
        duration: 300,
        }
    ).start(this.props.action);
}

Answer 2

我认为这是因为你没有提供一个函数作为start()的回调，而是当你执行.start(this.props.action());时函数的结果，所以它在定义时调用了函数它

你应该像这样传递它：.start(this.props.action);或者像这样.start(() => this.props.action());然后传递它的功能。

动画回调在完成之前执行

2 个答案: