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

Question

我有这样的场景，我需要在单击按钮时打开音乐播放器，并在单击关闭按钮时关闭播放器。我正在使用 showPlayer 状态变量来显示和隐藏播放器以及用于进入和退出动画的 classes。

<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 class 附加到 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 class。但是这里 showPlayer 状态发生了变化，组件重新渲染了广告 hide-player class 没有附加。

解决方案 3：

.player-container {
    transiton:.5s ease

    &.show-player {
        right: 0%;
    }

    &.hide-player {
        right: -100%;
    }
}

这个方法有效。但是该组件有点悬停和移动。为此，我正在使用 <Draggable> 库。因此，当为 show-player class 使用过渡时，会在组件四处移动时应用过渡。我不喜欢。

看来我的做法是错误的。任何帮助，将不胜感激。干杯~

Answer 1

已编辑：

由于您的播放器显示或隐藏，您应该只需要（在您的 css 中）有一个默认位置（class）和另一个用于您的组件状态（显示或隐藏） ).

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

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

如果 <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%;
    }
}

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

css transiton and css animation cannot be used together

css

reactjs

css-animations

css-transitions