vue css animation 动画

vue管理端布局的时候隐藏左侧菜单栏右侧主体部分更改宽度

@keyframes showMove {
  from {
    width: calc(100vw - 74px);
  }
  to {
    width: calc(100vw - 220px);
  }
}
@keyframes hideMove {
  from {
    width: calc(100vw - 220px);
  }
  to {
    width: calc(100vw - 74px);
  }
}
.main-container {
  margin: 0;
  padding-top: 50px;
  width: calc(100vw - 220px);
  animation: showMove 0.28s;
}
.hideSidebar .main-container {
  width: calc(100vw - 74px);
  animation: hideMove 0.28s;
}