我有以下一节的css：

.navbar {
  position: fixed;
  display: flex;
  z-index: 3;
  width: 70px;
  background-color: black;
  height: 100%;
  transition: 0.5s;
}

.navbar:hover {
  width: 200px;
}

@media (width < 1080px) {
  .navbar {
    position: sticky;
    transition: none;
    flex-direction: row;
    width: 100%;
    height: 100px;
  }
  
  .navbar:hover {
    width: 100%;
  }
}

它描述了一个导航栏，当视口大于1080 px时，它是一个侧边栏，当我把鼠标悬停在它上面时，它会拉伸到200 px，如果视口小于1080 px，侧边栏就会变成水平导航栏。
我想要实现的是在悬停和悬停离开时平滑地拉伸侧边栏，目前这是按预期工作的。
我还想要的是从侧边栏到水平导航栏的快速转换，反之亦然。不幸的是，它只部分起作用。虽然我已经实现了从侧边栏到水平导航栏的快速转换，但我不知道如何才能创建从水平导航栏到侧边栏的快速转换。
我明白这里的问题是什么（当从水平导航栏切换到侧边栏时，过渡再次设置为0.5s，因此动画），但我很难弄清楚如何实现从侧边栏到导航栏的双向快照，同时保持“悬停进出”过渡。
怎样才是达到这个效果的正确方法呢？
下面是jsfidle中侧边栏/导航栏的当前状态示例：https://jsfiddle.net/mz29afyh/2/