Transition effect isn't working on div toggle

Question

Why my menu toggle is not smooth transition? I've added transition 200ms and it doesn't work at all. How can I fix this?

#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

You can't do transitions with display, however you can do so with opacity and visibility: Transitions on the CSS display property