动画后关键帧还原回开始

Question

我有以下组件，当可见道具更改为false时，应滚动出导航栏。它可以按预期工作，但是在滚动操作完成后，它似乎会自行重置。

动画制作完成后，如何使导航栏保持隐藏状态。

import { styled, css, keyframes } from '@unmind/styles';
import { rem } from 'polished';
import React from 'react';

interface Props {
 visible: boolean;
 handler?(): void;
}

const NavBarContainer = styled.div<{ visible: boolean }>`
 width: 100%;
 height: ${rem('78.5px')};
 display: flex;
 flex-direction: row;
 align-items: center;
 padding: 0 ${rem('30px')};
 border-bottom: ${rem('1.5px')} solid
${({ theme }) => theme.colors.neutral.smoke};

${({ visible }) => (!visible ? hideNav : '')}
`;

const KeyFrameNav = keyframes`
 100% {
 height: ${rem('0px')};
}
`;

const hideNav = css`
  animation: ${KeyFrameNav} 1000ms ease-in-out;
`;

export class Navigation extends React.Component<Props> {
  render() {
    return <NavBarContainer visible={this.props.visible} />;
  }
}