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');

为播放器组件创建了一个引用，并在按钮单击时添加了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%;
    }
}