css组件动画正在移动父组件

Question

我的面板中有一个带有按钮的组件，当我单击按钮时，会在侧面打开一个侧边栏模式，从右侧滑入。然而，当我打开它时，侧边栏模式不是从右边浮动的，而是在没有动画的情况下出现的，并且父组件从左边滑动而不是它。

当我关闭模态时，侧边栏按计划在父模态之外滑动并消失。如何按照正确的顺序制作中的模态开头动画？

父组件：

.parent-widget {
flex: 1;
position: relative;
padding: 15px 20px 20px;
border-radius: 10px;
box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.06);
background-color: #ffffff;
overflow: hidden;

侧边栏模式：

@keyframes sidebar-open-animation {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
@keyframes sidebar-close-animation {
from {
transform: translateX(0);
}
to {
transform: translateX(100%);
}
}
.inline-sidebar-modal-container {
.sidebar {
position: absolute;
top: 0;
bottom: 0;
background: white;
right: 0;
width: 300px;
display: flex;
flex-direction: column;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
animation: sidebar-open-animation 0.3s linear;
&.closing {
animation: sidebar-close-animation 0.3s linear;
}

Answer 1

您必须将transform: translateX(100%);值添加到&.closing部分。您的代码似乎可以工作(这部分代码，您已在此处共享(。

检查这个小提琴(我用了一个jsfiddle，因为scs的风格(https://jsfiddle.net/v8ck3pjg/41/

如果将CCD_ 3添加到侧边栏；运行"；在左上角，它正确地向右移动
这是你想要的效果吗？