CSS-如何在移除时反转动画

我在我的网站上有一个页面，我可以并排显示在面板上。我在两个视图中显示这两个面板：水平和垂直。我有一个按钮，可以在这两个视图之间切换。我试图在两个视图之间的转换上添加一些CSS动画。但是，我的动画仅在一个方向上工作（从垂直到水平），反向动画的显示顺序错误

var isVertical=false；
变量框=$（“.box”）；
函数toggleViews（）
{ 
isVertical=！isVertical；
如果（垂直）
{
框。添加类（“垂直框”）；
}
其他的
{
框。移除类（“垂直框”）；
}
}

.container
{
显示：块；
宽度：400px；
高度：150像素；
边框：2件纯黑；
溢出：隐藏；
}
.盒子
{
-webkit转换属性：宽度、高度；
-webkit转换持续时间：2s，2s；
-webkit转换延迟：0秒，2秒；
-webkit过渡计时功能：轻松；
显示：内联块；
宽度：50%；
身高：100%；
}
.竖框
{
宽度：100%；
身高：50%；
}
.a{背景色：深色；}
.b{背景色：darkorchid；}

切换
AB

var isVertical=false；
变量框=$（“.box”）；
函数toggleViews（）
{ 
isVertical=！isVertical；
如果（垂直）
{
框。添加类（“垂直框”）；
}
其他的
{
框。移除类（“垂直框”）；
}
}

.container
{
显示：块；
宽度：400px；
高度：150像素；
边框：2件纯黑；
溢出：隐藏；
}
.盒子
{
-webkit转换属性：高度、宽度；/*已交换*/
-webkit过渡持续时间：0.5s，0.5s；
-webkit转换延迟：0s，0.5s；
-webkit过渡计时功能：轻松；
display:block；/*试试这个*/
浮动：左；/*和这个*/
宽度：50%；
身高：100%；
}
.竖框
{
-webkit转换属性：宽度、高度；/*已添加*/
宽度：100%；
身高：50%；
}
.a{背景色：深色；}
.b{背景色：darkorchid；}

切换
AB

添加对您所做工作的解释会很好@当然可以，等一下：）@Pilan，可以延迟显示

属性吗？所以它只有在动画结束后才会改变？@GilEpshtain我不知道你的意思-因为
显示
属性在动画过程中不会改变。@GilEpshtain我猜你希望紫色部分不会立即消失，而是先shink？