css过渡和css动画不能一起使用

Question

我有一个场景，我需要点击一个按钮打开音乐播放器，点击关闭按钮关闭播放器。我使用showPlayer状态变量来显示和隐藏播放器，以及用于进入和退出动画的类。

<div className={`${showPlayer ? 'show-player' : 'hide-player'} player-container `}></div>

下面是我使用的样式

.player-container {
z-index: 999;
position: absolute;
bottom: 0;
right: 0%;
width: 23rem;
background: $graph_box_gradient;
padding: 1rem;
border-radius: .5rem;
&.show-player {
animation: slideInRight .5s ease forwards;
}
&.hide-player {
animation: slideOutRight .5s ease forwards;
}
}
@keyframes slideInRight {
0% {
right: -100%;
}
100% {
right: 0%;
}
}
@keyframes slideOutRight {
0% {
right: 0%;
}
100% {
right: -100%;
}
}

我在这里面临的问题是，当页面加载时，showPlayer值为false，并且hide-player类附加到div。因此，播放器组件最初显示为在页面加载时滑出屏幕。

解决方案1:
我尝试了以下解决方案：

&.show-player {
animation: slideInRight .5s ease forwards;
}
&.hide-player {
right: -100%;
transition: 1s ease;
}

对进入动画使用animation属性，对退出动画使用transition属性。但当为同一元素给定animation时，似乎transition属性不起作用。

解决方案2:
尝试另一个解决方案：

playerRef.current.classList.add('hide-player');

为播放器组件创建了一个ref，并在点击按钮时添加了hide-player类。但是这里showPlayer状态被改变，并且组件重新呈现，并且hide-player类没有被附加。

解决方案3：

.player-container {
transiton:.5s ease
&.show-player {
right: 0%;
}
&.hide-player {
right: -100%;
}
}

这种方法有效。但是这个组件是可以悬停和移动的。我正在使用<Draggable>库。因此，当对show-player类使用转换时，当组件四处移动时会应用转换。这是我不喜欢的。

看来我处理这件事的方式不对。如有任何帮助，我们将不胜感激。干杯~

Answer 1

编辑：

由于您的播放器是显示或隐藏的，您只需要(在css中(有一个默认位置(类(和另一个用于组件状态的位置(显示或隐藏(。

此外，你的动画相当简单，所以关键帧动画似乎不是我的解决方案。

你的第三个解决方案对我来说似乎更合适。

如果<Draggable>正在为其动画使用transform属性，并且不希望transition对其造成干扰，则应指定仅希望过渡应用right属性。

<div className={`${showPlayer ? '' : 'hide-player'} player-container `}></div>

.player-container {
z-index: 999;
position: absolute;
bottom: 0;
right: 0%;
width: 23rem;
background: $graph_box_gradient;
padding: 1rem;
border-radius: .5rem;
transition: right .5s ease; // .5s transition only for right property
&.hide-player {
right: 100%;
}
}