Composants Styled + RÉACTION: transition CSS maintient la réinitialisation

Question

je un composant de style:

import styled, { keyframes } from 'styled-components'; 

const slideToCorner = keyframes` 
    from { 
    right: 0; 
    top: 0; 
    } 

    to { 
    right: 300px; 
    top: 50px; 
    } 
`; 

const SlideToCorner = styled.div` 
    position: relative; 
    right: 0; 
    top: 0; 
    ${props => props.slide && `animation: ${slideToCorner} 0.5s linear;`} 
    transition: all 1s linear; 
`; 

export default SlideToCorner; 

Voici comment il est utilisé:

<SlideToCorner slide={matchingStatus === MATCHING_STATES.CONFIRMING}> 
    <TargetBox> 
    <LocalVideo /> 
    </TargetBox> 
</SlideToCorner> 

Cependant, quand il l'anime maintient la réinitialisation de revenir à sa à mi-chemin de la position d'origine par l'animation:

Je peux confirmer que ce n'est pas le matchingStatus === MATCHING_STATES.CONFIRMING qui le cause.

Answer 1

Ajouter forwards dans

animation: ${slideToCorner} 0.5s linear forwards

Ou utiliser animation-fill-mode: forwards

Vérifiez la propriété animation-fill-mode pour différents comportements