侧边栏上的 css animation 关闭

Question

In this stackblitz, I am not able to add animation while closing, I tried it using transform, but it didnt seem to work HTML Blocker is used to covering the full screen in a half-transparent mode in mobile devices

 const sidebar = document.querySelector('.sidebar'); sidebar.querySelector('.blocker').onclick = hide; function show() { // swipe right sidebar.classList.add('visible'); document.body.style.overflow = 'hidden'; } function hide() { // by blocker click, swipe left, or url change sidebar.classList.remove('visible'); document.body.style.overflow = ''; } function toggle() { sidebar.classList.contains('visible')? hide(): show(); }

 .sidebar { /* it's a mobile sidebar, blocker and content */ position: fixed; top: 0; left: 0; width: 100vw; /* to cover the whole screen */ height: 100vh; padding: 0; /* to override the default padding */ background: rgba(0, 0, 0, .5); /* half transparent background */ display: none; z-index: 99999; /* to be on top of any other elements */ }.sidebar.visible { display: block; } /*cover the whole screen and to detect user click on background */.sidebar.blocker { position: absolute; width: 100%; height: 100%; } /* user content */.sidebar.content { position: absolute; top: 0; left: 0; background: #FFF; height: 100%; width: 250px; left: -50%; /* will be animated to left: 0, by animation */ animation: slide 0.5s forwards; } @keyframes slide { 100% { left: 0; } }

 <div class="sidebar"> <div class="blocker"></div> <div class="content"> Sidebar Content </div> </div>

With the above code, you can have a working sidebar.

Check the working code from stackblitz

https://allenhwkim.medium.com/mobile-friendly-sidebar-in-few-minutes-7817b5c5239f https://stackblitz.com/edit/medium-sidebar-1-eevvax?file=style.css,index.js

Answer 1

You can't animate between display:block (when .sidebar has .visible applied to it) and display:none (when .visible is removed from .sidebar ).

display:none turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements (ie .blocker and .content ) also have their display turned off.

The reason you get an animation upon adding .visible is that .sidebar now "exists" and so .sidebar-content also exists and as such animates. As soon as you remove .visible , .sidebar ceases to exist again and so it and its descendants disappear instantaneously.

You are along the right lines using transforms but you need to remove display:none as the method for hiding the sidebar. Something like the below is a good starting point. You may need to change some values to get it looking exactly as you wish. I have added a working codepen to show the result .

.sidebar {
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   padding: 0;
   background: rgba(0, 0, 0, .5);
   z-index: 99999;

   transform: translateX(-100%); // new property - will move the element off the left hand side of the screen
   transition: transform .5s ease-in-out; // new property - will make the sidebar slide in in a similar manner to your animation
}

.sidebar.visible {
   transform: translateX(0); // new property - makes sidebar sit in its natural position (i.e. taking up the whole viewport)
}

.sidebar .blocker {
   position: absolute;
   width: 100%;
   height: 100%;
}

.sidebar .content {
   position: absolute;
   top: 0;
   left: 0;
   background: #FFF;
   height: 100%;
   width: 250px;
}