在效果方法中使用效果时不起作用

Question

我正在尝试使用滚动效果，但它效果不佳。

要向下滚动持续时间，效果有效。

向上滚动，持续时间将被忽略，它会立即滚动。

<TouchableOpacity
onPress={() => setStateMenu(!stateMenu)}
activeOpacity={10}
>
...
</TouchableOpacity>

const [stateMenu, setStateMenu] = useState(false);
const translateY = new Animated.Value(0);
useEffect(() => {
controlMenu();
});
function controlMenu() {
if (!stateMenu) {//fechar Menu
//alert('Fechando');
Animated.timing(translateY, {
toValue: 0,
duration: 400,  
useNativeDriver: true,
//delay: 300,
}).start();
}
else {//abrir Menu
//alert('Abrindo');
Animated.timing(translateY, {
toValue: 800,
duration: 400,
useNativeDriver: true,
//delay: 300,
}).start();
}
}

当 stateMenu 等于 false 时，滚动从 0px 到 800px，尊重持续时间经过的时间，没错。 现在，当 stateMenu 为 true 时，滚动立即变为 0px，不遵守 0.400 秒。

Answer 1

试试这个

const [stateMenu, setStateMenu] = useState(false);
const translateY = new Animated.Value(0);
useEffect(() => {
controlMenu();
}, [stateMenu]); // listen changes in state menu
function controlMenu() {
if (!stateMenu) {//fechar Menu
//alert('Fechando');
Animated.timing(translateY, {
toValue: 0,
duration: 400,  
useNativeDriver: true,
//delay: 300,
}).start();
}
else {//abrir Menu
//alert('Abrindo');
Animated.timing(translateY, {
toValue: 800,
duration: 400,
useNativeDriver: true,
//delay: 300,
}).start();
}
}