过渡效果不适用于div切换

Question

为什么菜单切换不平稳？我添加了过渡200ms，它根本不起作用。我该如何解决？

#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

您不能通过显示进行过渡，但是可以通过不透明和可见性来进行过渡：Transitions on the CSS display property