Bootstrap 4 Seitenleiste CSS-Übergang funktioniert nicht

Question

Ich versuche Offconves Sidebar zu machen, alles funktioniert wie erwartet, außer dem Übergang, ich habe einen Haupt-Wrapper und zwei Sub-Wrapper für Inhalt und Sidebar (ich holen Sidebar-Liste aus der Datenbank). Ich habe Übergang auf CSS für sidebar gegeben, ich weiß nicht, was los ist, wenn Sie irgendeine Lösung geben können, wird es sehr hilfreich sein, ich habe meine Codes hinzugefügt (ich habe JavaScript toggleClass zum Umschalten Sidebar verwendet)

HTML

<div class="main-wrapper d-flex" id="main-wrapper"> 
    <main class="d-flex" id="main-content"> 
     <button type="button" id="slideButton" class="align-self-center order-2"> 
      <i class="fa fa-arrow-left fa-lg" id="slideArrow"></i> 
     </button> 
     <div class="book-wrapper d-flex flex-row flex-wrap"> 
      <div class="books"> 
       <div class="section-box"> 
        <figure> 
         <h3>اسم الكتاب</h3> 
         <p>معلومات:الوصف بدأ رسم الخرائط بعمل نيكول سانسون، بطريركر الفرنس</p> 
         <a href="#" class="btn btn-read">Read here</a> 
        </figure> 
        <img src="assets/books/1.png"> 
       </div> 
      </div> 
      <div class="books"> 
       <div class="section-box"> 
        <figure> 
         <h3>اسم الكتاب</h3> 
         <p>معلومات:الوصف بدأ رسم الخرائط بعمل نيكول سانسون، بطريركر الفرنس</p> 
         <a href="#" class="btn btn-read">Read here</a> 
        </figure> 
        <img src="assets/books/2.png"> 
       </div> 
      </div> 
      <div class="books"> 
       <div class="section-box"> 
        <figure> 
         <h3>اسم الكتاب</h3> 
         <p>معلومات:الوصف بدأ رسم الخرائط بعمل نيكول سانسون، بطريركر الفرنس</p> 
         <a href="#" class="btn btn-read">Read here</a> 
        </figure> 
        <img src="assets/books/3.png"> 
       </div> 
      </div> 
      <div class="books"> 
       <div class="section-box"> 
        <figure> 
         <h3>اسم الكتاب</h3> 
         <p>معلومات:الوصف بدأ رسم الخرائط بعمل نيكول سانسون، بطريركر الفرنس</p> 
         <a href="#" class="btn btn-read">Read here</a> 
        </figure> 
        <img src="assets/books/4.png"> 
       </div> 
      </div> 
      <div class="books"> 
       <div class="section-box"> 
        <figure> 
         <h3>اسم الكتاب</h3> 
         <p>معلومات:الوصف بدأ رسم الخرائط بعمل نيكول سانسون، بطريركر الفرنس</p> 
         <a href="#" class="btn btn-read">Read here</a> 
        </figure> 
        <img src="assets/books/4.png"> 
       </div> 
      </div> 
      <div class="books"> 
       <div class="section-box"> 
        <figure> 
         <h3>اسم الكتاب</h3> 
         <p>معلومات:الوصف بدأ رسم الخرائط بعمل نيكول سانسون، بطريركر الفرنس</p> 
         <a href="#" class="btn btn-read">Read here</a> 
        </figure> 
        <img src="assets/books/1.png"> 
       </div> 
      </div> 
      <div class="books"> 
       <div class="section-box"> 
        <figure> 
         <h3>اسم الكتاب</h3> 
         <p>معلومات:الوصف بدأ رسم الخرائط بعمل نيكول سانسون، بطريركر الفرنس</p> 
         <a href="#" class="btn btn-read">Read here</a> 
        </figure> 
        <img src="assets/books/2.png"> 
       </div> 
      </div> 
      <div class="books"> 
       <div class="section-box"> 
        <figure> 
         <h3>اسم الكتاب</h3> 
         <p>معلومات:الوصف بدأ رسم الخرائط بعمل نيكول سانسون، بطريركر الفرنس</p> 
         <a href="#" class="btn btn-read">Read here</a> 
        </figure> 
        <img src="assets/books/3.png"> 
       </div> 
      </div> 
      <div class="books"> 
       <div class="section-box"> 
        <figure> 
         <h3>اسم الكتاب</h3> 
         <p>معلومات:الوصف بدأ رسم الخرائط بعمل نيكول سانسون، بطريركر الفرنس</p> 
         <a href="#" class="btn btn-read">Read here</a> 
        </figure> 
        <img src="assets/books/4.png"> 
       </div> 
      </div> 
      <div class="books"> 
       <div class="section-box"> 
        <figure> 
         <h3>اسم الكتاب</h3> 
         <p>معلومات:الوصف بدأ رسم الخرائط بعمل نيكول سانسون، بطريركر الفرنس</p> 
         <a href="#" class="btn btn-read">Read here</a> 
        </figure> 
        <img src="assets/books/4.png"> 
       </div> 
      </div> 
      <div class="books"> 
       <div class="section-box"> 
        <figure> 
         <h3>اسم الكتاب</h3> 
         <p>معلومات:الوصف بدأ رسم الخرائط بعمل نيكول سانسون، بطريركر الفرنس</p> 
         <a href="#" class="btn btn-read">Read here</a> 
        </figure> 
        <img src="assets/books/1.png"> 
       </div> 
      </div> 
      <div class="books"> 
       <div class="section-box"> 
        <figure> 
         <h3>اسم الكتاب</h3> 
         <p>معلومات:الوصف بدأ رسم الخرائط بعمل نيكول سانسون، بطريركر الفرنس</p> 
         <a href="#" class="btn btn-read">Read here</a> 
        </figure> 
        <img src="assets/books/2.png"> 
       </div> 
      </div> 
      <div class="books"> 
       <div class="section-box"> 
        <figure> 
         <h3>اسم الكتاب</h3> 
         <p>معلومات:الوصف بدأ رسم الخرائط بعمل نيكول سانسون، بطريركر الفرنس</p> 
         <a href="#" class="btn btn-read">Read here</a> 
        </figure> 
        <img src="assets/books/3.png"> 
       </div> 
      </div> 
      <div class="books"> 
       <div class="section-box"> 
        <figure> 
         <h3>اسم الكتاب</h3> 
         <p>معلومات:الوصف بدأ رسم الخرائط بعمل نيكول سانسون، بطريركر الفرنس</p> 
         <a href="#" class="btn btn-read">Read here</a> 
        </figure> 
        <img src="assets/books/4.png"> 
       </div> 
      </div> 
      <div class="books"> 
       <div class="section-box"> 
        <figure> 
         <h3>اسم الكتاب</h3> 
         <p>معلومات:الوصف بدأ رسم الخرائط بعمل نيكول سانسون، بطريركر الفرنس</p> 
         <a href="#" class="btn btn-read">Read here</a> 
        </figure> 
        <img src="assets/books/4.png"> 
       </div> 
      </div> 
      <div class="books"> 
       <div class="section-box"> 
        <figure> 
         <h3>اسم الكتاب</h3> 
         <p>معلومات:الوصف بدأ رسم الخرائط بعمل نيكول سانسون، بطريركر الفرنس</p> 
         <a href="#" class="btn btn-read">Read here</a> 
        </figure> 
        <img src="assets/books/3.png"> 
       </div> 
      </div> 
      <div class="books"> 
       <div class="section-box"> 
        <figure> 
         <h3>اسم الكتاب</h3> 
         <p>معلومات:الوصف بدأ رسم الخرائط بعمل نيكول سانسون، بطريركر الفرنس</p> 
         <a href="#" class="btn btn-read">Read here</a> 
        </figure> 
        <img src="assets/books/1.png"> 
       </div> 
      </div> 
      <div class="books"> 
       <div class="section-box"> 
        <figure> 
         <h3>اسم الكتاب</h3> 
         <p>معلومات:الوصف بدأ رسم الخرائط بعمل نيكول سانسون، بطريركر الفرنس</p> 
         <a href="#" class="btn btn-read">Read here</a> 
        </figure> 
        <img src="assets/books/2.png"> 
       </div> 
      </div> 
      <div class="books"> 
       <div class="section-box"> 
        <figure> 
         <h3>اسم الكتاب</h3> 
         <p>معلومات:الوصف بدأ رسم الخرائط بعمل نيكول سانسون، بطريركر الفرنس</p> 
         <a href="#" class="btn btn-read">Read here</a> 
        </figure> 
        <img src="assets/books/3.png"> 
       </div> 
      </div> 
     </div> 
    </main> 
    <div class="p-0" id="sidebar"> 
     <form action="" class="search"> 
      <div class="input-group"> 
       <i class="input-group-addon fa fa-search"></i> 
       <input class="form-control" type="search" placeholder="بحث الكتب" aria-label="Search"> 
      </div> 
     </form> 

     <div id="tree"></div> 

    </div> 
</div> 
     <script> 
     $("#slideButton").click(function (e) { 
      $("#sidebar").toggleClass("collapse"); 
     }); 
     </script> 

CSS

#main-wrapper { 
height: 100vh; 
} 

#main-content { 
.book-wrapper { 
    justify-content: space-between; 
    overflow: auto; 
    height: inherit; 
    padding-bottom: 100px; 
    -ms-overflow-style: none; 
    &::after { 
     content: ""; 
     flex: auto; 
    } 
    .books{ 
     padding: 10px; 
    } 
    .section-box { 
     height: 230px; 
     width: 160px; 
     background: radial-gradient(#6e6e6e, #2f2f2f); 
     background: -webkit-radial-gradient(#6e6e6e, #2f2f2f); 
     background: -moz-radial-gradient(#6e6e6e, #2f2f2f); 
     color: #fff; 
     position: relative; 
     overflow: hidden; 
     margin: 10px 0; 
    } 
    .section-box figure { 
     position: absolute; 
     text-align: right; 
     padding: 10px 19px 19px 19px; 
     width: 100%; 
     height: 100%; 
     border-top: 1px solid #fff; 
     background: rgba(0, 0, 0, 0.71); 
     bottom: -80%; 
     transition: ease-in-out .5s; 
     margin-bottom: 0; 
    } 
    .section-box:hover figure { 
     bottom: 0; 
    } 
    .section-box figure h3 { 
     margin: 0; 
     padding-bottom: 10px; 
    } 
    .section-box img { 
     height: 100%; 
     width: auto; 
    } 
    .btn-read { 
     width: 100%; 
     background: transparent; 
     border-radius: 0; 
     border: 1px solid #ffffff; 
     color: #fff; 
    } 
} 
button i { 
    font-size: 24px; 
    background-color: #e6e4e4; 
} 
} 

#sidebar { 
min-width: 350px; 
max-width: 350px; 
overflow-y: auto; 
-webkit-transition: all 0.5s ease; 
-moz-transition: all 0.5s ease; 
-o-transition: all 0.5s ease; 
transition: all 0.5s ease; 
@include red-gradient(right, 
left); 
.collapse{ 
    margin-right: -350px; 
} 
.search { 
    padding: 15px 10px 0 10px; 
    margin-left: 10%; 
    width: 80%; 
} 
.search i { 
    line-height: 1.5; 
    background: #fff; 
    border-top-left-radius: 15px; 
    border-bottom-left-radius: 15px; 
} 
.search input { 
    border-top-right-radius: 15px; 
    border-bottom-right-radius: 15px; 
    text-align: right; 
    border-left: none; 
    &:focus { 
     border-color: none; 
     box-shadow: none; 
    } 
} 
} 

Answer 1

Wenn Sie schreiben SASS, wie Sie die Stile für die Klasse geschrieben haben, die, umgeschaltet wird collapse wird es nicht auf Ihre Seitenleiste angewendet. Sie müssten Ihre CSS schreiben #sidebar.collapse anstelle des verschachtelten #sidebar .collapse zu sein:

[die SASS Eltern Selektor: https://css-tricks.com/the-sass-ampersand/]

#sidebar { 
    &.collapse { 
     margin-right: -350px; 
    } 
}