Bootstrap 4侧边栏css过渡不起作用

Question

我试图制作 offcanves 侧边栏，除了转换之外，一切都按预期工作，我有一个主包装器和两个用于内容和侧边栏的子包装器（我正在从数据库中获取侧边栏列表）。我没有为侧边栏提供 CSS 的转换，我不知道发生了什么，如果你能提供任何解决方案，那将非常有帮助，我在下面添加了我的代码（我使用 JavaScript toggleClass 来切换侧边栏）

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

如果您正在编写 SASS，您是如何为切换的类编写样式的，collapse，它不会应用于您的侧边栏。您需要将 CSS 编写为 #sidebar.collapse 而不是嵌套的 #sidebar .collapse：

[使用 SASS 父选择器：https://css-tricks.com/the-sass-ampersand/]

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