Развернуть раздел по клику с плавной анимацией - PullRequest
Новая
       43

Развернуть раздел по клику с плавной анимацией

0 голосов
/ 22 апреля 2019

Я не могу получить плавную анимацию для моего раздела.

Я пытаюсь получить плавную анимацию выпадающего меню, когда нажимаю кнопку «больше проектов» (я поставил ее как тег привязки без href). Как мне это сделать?

Я пытался это Вопрос , но я не мог заставить его работать. Я думаю, что это может быть из-за того, что некоторые из моих классов мешают этому? Вот мой код

У меня есть 2 из тех же разделов, но ко второму добавлен класс с javascript, поэтому он не показывает, когда страница загружается. Я попытался сделать это с visibility: hidden и затем показать это с анимацией, но это тоже не сработало. 

window.addEventListener('load', () => {
    let moreButton = document.querySelector('#actual-more-button');
    let moreBoxes = document.querySelector('.more-boxes');

    moreBoxes.classList.add("remove-boxes");

    moreButton.addEventListener("click", function () {
        moreBoxes.classList.toggle('remove-boxes');
        document.querySelector('.smalldesc').classList.toggle('expand');
        if (moreButton.innerHTML === "Less Projects") {
            moreButton.innerHTML = "More Projects";
        } else {
            moreButton.innerHTML = "Less Projects";
        }
    });
});
.remove-boxes {
    display: none;
    visibility: hidden;
}

.smalldesc {
    max-height: 52px;
    overflow: hidden;
    transition: all 2s ease;
}

.smalldesc.expand {
    max-height: 100%;
}
<section id="boxes">
    <div class="box-container">
        <div class="box" data-aos="fade-right" data-aos-offset="200" data-aos-delay="50" data-aos-duration="1000">
            <div>
                <img src="assets/img/colorgame-screenshot.png" alt="">
            </div>
            <i class="fab fa-html5 fa-3x"></i><i class="fab fa-css3-alt fa-3x"></i><i class="fab fa-js fa-3x"></i>
            <h1><a href="assets/Color Game/index.html">Color Game</a></h1>
            <p>Game that gives a random rgb value to the user and the user needs to guess the correct color.</p>
        </div>
        <div class="box" data-aos="fade-up" data-aos-offset="200" data-aos-delay="50" data-aos-duration="1000">
            <div>
                <img src="assets/img/rps-screenshot.png" alt="">
            </div>
            <i class="fab fa-html5 fa-3x"></i><i class="fab fa-css3-alt fa-3x"></i><i class="fab fa-js fa-3x"></i>
            <h1><a href="assets/Rock Paper Scissor Game/index.html">Rock Paper Scissor Game</a></h1>
            <p>Good old rock, paper, scissors game versus a computer.</p>
        </div>
        <div class="box" data-aos="fade-left" data-aos-offset="200" data-aos-delay="50" data-aos-duration="1000">
            <div>
                <img src="assets/img/to-do-list-screenshot.png" alt="">
            </div>
            <i class="fab fa-html5 fa-3x"></i><i class="fab fa-css3-alt fa-3x"></i><i class="fab fa-js fa-3x"></i>
            <h1><a href="assets/ToDoList Project/index.html">To-do List</a></h1>
            <p>Simple todo list app. Let's you add, check off, and remove tasks.</p>
        </div>
    </div>
</section>

<div class="smalldesc">
    <section id="boxes" class="more-boxes">
        <div class="box-container">
            <div class="box" data-aos="fade-right" data-aos-offset="200" data-aos-delay="50" data-aos-duration="1000">
                <div>
                    <img src="assets/img/colorgame-screenshot.png" alt="">
                </div>
                <i class="fab fa-html5 fa-3x"></i><i class="fab fa-css3-alt fa-3x"></i><i class="fab fa-js fa-3x"></i>
                <h1><a href="assets/Music Tap Project/sound-game.html">Music Tap</a></h1>
                <p>Press some keys. Make some music.</p>
            </div>
            <div class="box" data-aos="fade-up" data-aos-offset="200" data-aos-delay="50" data-aos-duration="1000">
                <div>
                    <img src="assets/img/rps-screenshot.png" alt="">
                </div>
                <i class="fab fa-html5 fa-3x"></i><i class="fab fa-css3-alt fa-3x"></i><i class="fab fa-js fa-3x"></i>
                <h1><a href="assets/Rock Paper Scissor Game/index.html">Rock Paper Scissor Game</a></h1>
                <p>Good old rock, paper, scissors game versus a computer.</p>
            </div>
            <div class="box" data-aos="fade-left" data-aos-offset="200" data-aos-delay="50" data-aos-duration="1000">
                <div>
                    <img src="assets/img/to-do-list-screenshot.png" alt="">
                </div>
                <i class="fab fa-html5 fa-3x"></i><i class="fab fa-css3-alt fa-3x"></i><i class="fab fa-js fa-3x"></i>
                <h1><a href="assets/ToDoList Project/index.html">To-do List</a></h1>
                <p>Simple todo list app. Let's you add, check off, and remove tasks.</p>
            </div>
        </div>
    </section>
</div>
...