Как я могу анимировать компонент из одного представления, чтобы понизить DOM? - PullRequest
Новая
       24

Как я могу анимировать компонент из одного представления, чтобы понизить DOM?

1 голос
/ 04 июня 2019

Я пишу игру PlayingCard.Я хочу анимировать карту из Handfan в cardTable.Как только карта выходит из режима просмотра, она исчезает.Как я могу плавно анимировать его до середины дисплея, что будет выше в DOM?

Хотя, может быть, он работает с реагировать на родной портал?

Это карта: 

return (
      <View style={styles.outerContainer}>
        <Animated.View style={[styles.playerHandContainer, { width: containerAnimValue.x, //+ widthOffset, 
                              height: containerAnimValue.y }]}>
        {cards.map((card, idx) => {
          const { suit, number } = card

          const { x, y, angle } = coords[idx]
          const originalIndex = originalCards.indexOf(JSON.stringify(card))
          // const styleObject = { left: x + leftOffset, top: y, transform: [{ rotate: Math.round(angle) + 'deg' }]}
          const translationAnimValue = translationAnimationValues[originalIndex]

angle, number, originalIndex')
          const styleObject = { left: translationAnimValue.x, top: translationAnimValue.y, 
                                transform: [{ rotate: spins[originalIndex] }]}
          // the list is necessary because it doesn't give you the same results if you put the object directy in the jsx curlies
          return <AnimatedClassCard onPress={() => this.cardOnPress(card, cards, idx, coords, width, height)} 
                                    card={{ suit, number }} key={originalIndex} style={[styles.playerCards, styleObject]}
                                    renderCard={renderCard}/>

                }
            )
        }
        </Animated.View>
      </View>

карта должна просто перемещаться из контейнера ручного вентилятора в основной контейнер, не исчезая.

...