How to make the application of a new class smooth?

var main_menu_block1 = document.getElementById("main_menu_block1"); var main_menu_block2 = document.getElementById("main_menu_block2"); var main_menu_block3 = document.getElementById("main_menu_block3"); var mmb_left1 = document.getElementById("mmb_left1"); var mmb_left2 = document.getElementById("mmb_left2"); var mmb_left3 = document.getElementById("mmb_left3"); var mmb_right1 = document.getElementById("mmb_right1"); var mmb_right2 = document.getElementById("mmb_right2"); var mmb_right3 = document.getElementById("mmb_right3"); window.onload = function() { main_menu_block1.onclick = function() { mmb_right1.className += " show"; mmb_left1.className += " show"; mmb_right3.className -= " show"; mmb_left3.className -= " show"; mmb_right2.className -= " show"; mmb_left2.className -= " show"; mmb_right2.className += " hide"; mmb_left2.className += " hide"; mmb_right3.className += " hide"; mmb_left3.className += " hide"; } main_menu_block2.onclick = function() { mmb_right2.className += " show"; mmb_left2.className += " show"; mmb_right1.className -= " show"; mmb_left1.className -= " show"; mmb_right3.className -= " show"; mmb_left3.className -= " show"; mmb_right1.className += " hide"; mmb_left1.className += " hide"; mmb_right3.className += " hide"; mmb_left3.className += " hide"; } main_menu_block3.onclick = function() { mmb_right3.className += " show"; mmb_left3.className += " show"; mmb_right1.className -= " show"; mmb_left1.className -= " show"; mmb_right2.className -= " show"; mmb_left2.className -= " show"; mmb_right1.className += " hide"; mmb_left1.className += " hide"; mmb_right2.className += " hide"; mmb_left2.className += " hide"; } } 
 #mmb_left1, #mmb_left2, #mmb_left3, #mmb_right1, #mmb_right2, #mmb_right3 { width: 50%; float: left; } .mmb_left { position: absolute; opacity: 0; display: none; p { opacity: 0; } } .mmb_right { position: absolute; opacity: 0; display: none; p { opacity: 0; } } .hide { opacity: 0; display: none; p { opacity: 0; } } .show { -webkit-transition: 0.7s; -moz-transition: 0.7s; -ms-transition: 0.7s; -o-transition: 0.7s; position: relative; width: 100%; opacity: 1; background-color: black; display: inline-block; p { opacity: 1; color: white; } } hr { margin: 0; } body { background-color: #7a9273; margin: 0; } .main { &_blog { background-color: #7b88bf; float: left; &_smm { display: inline-block; float: left; a { text-decoration: none; } .roboto; } } &_menu { position: fixed; width: 100%; float: right; height: 100vh; background-color: #bc5b55; z-index: 110; &_block { position: relative; cursor: pointer; height: 12%; min-height: 50px; max-height: 70px; padding-top: 10px; p { .roboto; color: white; text-align: center; } h2 { .roboto; color: white; text-align: center; margin-top: 0px; font-weight:400; font-size: 18px; } h3 { .roboto; color: white; text-align: center; } a { .roboto; color: white; text-align: center; } } } } 
 <section> <div class="main_menu"> <div id="main_menu_block1" class="main_menu_block main_menu_nk"><h2>Накрутка</h2> <div class="mmb_left" id="mmb_left1"><p>231212</p></div> <div class="mmb_right" id="mmb_right1"><p>231212</p></div> </div> <hr> <div id="main_menu_block2" class="main_menu_block main_menu_p"><h2>Продвижение</h2> <div class="mmb_left" id="mmb_left2"><p>231212</p></div> <div class="mmb_right" id="mmb_right2"><p>231212</p></div> </div> <hr> <div id="main_menu_block3" class="main_menu_block main_menu_vs"><h2>Ведение страницы</h2> <div class="mmb_left" id="mmb_left3"><p>123</p></div> <div class="mmb_right" id="mmb_right3"><p>123</p></div> </div> <hr> </div> </section>

  • But why is everything so confusing to make at least one class of these elements that perform one function - bad4iz

2 answers 2

This property try to assign the default block to which you want to apply the animation.

 div { transition-duration: .2s; }

here see Использование CSS переходов to MDN
and here CSS3-переходы to HTML5 BOOK

    The fact is that the display property cannot be animated! In general, the code is correct. If you immediately make display: block or another and only animate the opacity, it will be normal, and if you want the blocks to go out, you can animate height from 0 to the desired value. BUT again, you can not animate from 0 to auto, you need to value, with any as% and px em rem.