过渡效果不适用于 div 切换

Question

为什么我的菜单切换不平滑过渡？ 我添加了过渡 200 毫秒，但它根本不起作用。 我怎样才能解决这个问题？

#sidebar-container2
  min-height: 100vh
  width: 80px
  display: none
  transition: 200ms



#sidebar-container
  min-height: 100vh

methods: {
    sidebar() {
      var menu = document.querySelector('#sidebar-container');
      var menuSmall = document.querySelector('#sidebar-container2');
      menuSmall.style.display = "block";
      menu.style.display = "none";
        
    },
    openbar() {
      var menu = document.querySelector('#sidebar-container');
      var menuSmall = document.querySelector('#sidebar-container2');
      menuSmall.style.display = "none";
      menu.style.display = "block";
    }

Answer 1

您不能使用显示进行转换，但可以使用不透明度和可见性进行转换： CSS 显示属性上的转换