如何用zindex响应淡入淡出的动画?

时间:2019-02-18 18:37:23

标签: reactjs css3 react-native animation

我正在尝试始终在屏幕上方显示具有可滚动视图的消息的动画。 在我的FlatList组件中单击onButtonClick时,效果很好。但是存在一个小问题,因为Animated.View绝对位置始终位于屏幕顶部,这是因为Flatlist的最顶部元素不可单击。我尝试使用zIndex,似乎没有效果。 如何固定点击以使动画立即生效?

//styles
 notification: {
    position: 'absolute',
    top: 50,
    alignSelf: 'center',
    zIndex: 100
  },
  notificationWrapper: {
    height: 100,
    width: 270,
    backgroundColor: 'rgba(255,255,255,1)',
    borderRadius: 10,
    marginTop: 40,
    marginBottom: 40,
    marginLeft: 28,
    marginRight: 28,
    flexDirection: 'row',
    alignItems: 'center',
    paddingLeft: 28
  }
//js

onButtonClick = () => {
    this.fadeIn.setValue(0);
    Animated.timing(
      this.fadeIn,           
      {
        toValue: 1,
        duration: 1000,
      }
    ).start(() => {
      setTimeout(() => {
        this.fadeOut();
      }, 2000);
    });
}

fadeOut = () => {
    this.fadeIn.setValue(1);
    Animated.timing(
       this.fadeIn,
       {
         toValue: 0,
         duration: 1000,
       }
    ).start();
}
<Fragment>
  <ScrollView style={[styles.mainContainer, {flex: 1}]}>
   <FlatList
     style={{ paddingTop: 10, paddingLeft: 20, paddingRight: 20 }}
     data={favouriteData}
     keyExtractor={this.keyExtractor}
     renderItem={this.rendeCampus}
   />
 </ScrollView>
   <Animated.View                 
     style={[styles.notification, {opacity: this.fadeIn, zIndex: 
          this.fadeIn}]}
    >
      <View style={styles.notificationWrapper}>
        <Text style={{
          fontSize: 12,
          lineHeight: 15,
          color: 'rgba(42,36,66,1)',
          width: 270
        }}>This restaurant has been added to your favourites list</Text>
      </View>
   </Animated.View>
</Fragment>

2 个答案:

答案 0 :(得分:1)

我猜其他所有内容默认为zIndex: 0

尝试使用像这样的插值:

this.zAnimate = this.fadeIn.interpolate({
  inputRange: [ 0, 1],
  outputRange: [-1, 9]
})

并将this.zAnimate分配给您的zIndex。您可能需要稍微玩一下outputRange,具体取决于您希望它何时在后面淡出,出现在前面。

答案 1 :(得分:0)

您可能需要使用transform推开视图。 例如。

this.fadeIn.setValue(1);
    Animated.timing(
       this.fadeIn,
       {
         toValue: 0,
         duration: 1000,
       }
    ).start(() => {
      this.transform.setValue(-200);
    });