使用JS和CSS实现Bootstrap页面网格布局多列切换动画

Animate a Bootstrap Grid

bootstrap, template, grid

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 4610
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

document.addEventListener('DOMContentLoaded', function() {
    let btnToggle = document.querySelector('#btn-toggle');
    let rowCards = document.querySelector('.row-cards');
    let mainRow = document.querySelector('.main-row');
    let colCardAll = document.querySelectorAll('.col-card');
    let cardAll = document.querySelectorAll('.card');

btnToggle.addEventListener('click', function() {
        if (!rowCards.classList.contains('is-moving')) {
            mainRow.classList.toggle("no-menu");

for (i = 0; i < cardAll.length; i++) {
                let clone = cardAll[i].cloneNode(true);
                clone.classList.add("clone");
                cardAll[i].parentElement.insertBefore(clone, cardAll[i]);

let top = clone.getBoundingClientRect().top;
                let left = clone.getBoundingClientRect().left;
                let width = clone.getBoundingClientRect().width;
                let height = clone.getBoundingClientRect().height;

clone.style.position = 'fixed';
                clone.style.top = top + 'px';
                clone.style.left = left + 'px';
                clone.style.width = width + 'px';
                clone.style.height = height + 'px';
            }

document.querySelector('.col-menu').classList.toggle('col-0');
            document.querySelector('.col-menu').classList.toggle('col-4');
            document.querySelector('.col-cards').classList.toggle('col-8');
            document.querySelector('.col-cards').classList.toggle('col-12');
            for (i = 0; i < colCardAll.length; i++) {
                colCardAll[i].classList.toggle('col-4');
                colCardAll[i].classList.toggle('col-6');
            }
            rowCards.classList.add('is-moving');

let cardCloneAll = document.querySelectorAll('.card.clone');
            for (i = 0; i < cardCloneAll.length; i++) {
                let top = cardAll[i].getBoundingClientRect().top;
                let left = cardAll[i].getBoundingClientRect().left;
                let width = cardAll[i].getBoundingClientRect().width;
                let height = cardAll[i].getBoundingClientRect().height;

cardCloneAll[i].style.top = top + 'px';
                cardCloneAll[i].style.left = left + 'px';
                cardCloneAll[i].style.width = width + 'px';
                cardCloneAll[i].style.height = height + 'px';
            }

setTimeout(function() {
                rowCards.classList.remove('is-moving');
                for (i = 0; i < cardCloneAll.length; i++) {
                    cardCloneAll[i].remove();
                }
            }, 1000)

}

})

//simulate click for thumbnail 
    setTimeout(function() {
        document.getElementById('btn-toggle').click();
    }, 500);
    setTimeout(function() {
        document.getElementById('btn-toggle').click();
    }, 2500)
})

编译

CSS

* {
    box-sizing: border-box;
}
body {
    color: #333 !important;
    font-family: "open sans";
    padding: 20px;
}
body.no-scroll {
    overflow: hidden;
}
.main {
    padding-left: 40px;
    padding-right: 40px;
}
.col-0 {
    flex: 0 0 0%;
    max-width: 0%;
}
.filter-title {
    text-transform: uppercase;
    margin-bottom: 20px;
}
.main-row.no-menu .menu {
    -webkit-transform: translate3d(-300px, 0, 0);
    transform: translate3d(-300px, 0, 0);
}
.col-menu .menu-wrap {
    position: relative;
}
.col-menu .menu {
    transition: 1s;
    position: absolute;
    width: 200px;
    left: 0;
    top: 0;
}
.row-cards.is-moving .card.clone {
    transition: 1s;
}
.row-cards.is-moving .card:nth-child(1) {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.row-cards.is-moving .card:nth-child(2) {
    opacity: 0;
}
.col-card__content {
    position: relative;
}
.card {
    padding: 0;
    border: none;
    margin-bottom: 50px;
    box-shadow: 0 2px 14px 0 rgba(47, 60, 83, 0.16);
}
.card .card-body {
    padding: 30px 20px;
}
.card .card-title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
}
.card .card-text {
    font-size: 12px;
    line-height: 1.4;
}
.card .card-list {
    font-size: 12px;
    padding-left: 15px;
}
#btn-toggle {
    margin: 0 auto;
    margin-bottom: 20px;
    width: 200px;
    display: block;
    background: #40bff6;
    background: linear-gradient(90deg, #40bff6 0%, #6e66e0 100%);
    border: none;
    font-size: 14px;
    padding: 15px;
    font-weight: 300;
    box-shadow: 0 2px 14px 0 rgba(47, 60, 83, 0.3);
}
html,
body {
    padding: 0;
}
body {
    background-color: #f5f6f7;
}
header.tg-header {
    padding: 40px;
    margin-bottom: 40px;
    background: #f75964;
    background: linear-gradient(90deg, #f75964 0%, #f99468 100%);
    color: #fff;
}
h1.tg-h1 {
    text-align: center;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: bold;
}
h2.tg-h2 {
    text-align: center;
    font-size: 12px;
    letter-spacing: 1.2px;
    font-weight: 300;
}
hr.tg-hr {
    margin: 0 auto;
    margin-top: 30px;
    margin-bottom: 30px;
}
footer.tg-footer {
    text-align: center;
    padding-bottom: 50px;
}
.tg-link {
    display: inline-block;
    margin: 0 20px;
    text-align: center;
    color: #278fb2;
}

HTML

<div class="main">
    <div id="btn-toggle" class="btn btn-primary">Show / Hide Filters</div>
    <div class="row main-row">
        <div class="col-4 col-menu">
            <div class="menu-wrap">
                <div class="menu">
                    <h6 class="filter-title">Filters</h6>
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <div class="input-group-text">
                                <input type="checkbox" aria-label="Checkbox for following text input">
                            </div>
                        </div>
                        <div class="form-control">Filter 1</div>
                    </div>
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <div class="input-group-text">
                                <input type="checkbox" aria-label="Checkbox for following text input">
                            </div>
                        </div>
                        <div class="form-control">Filter 2</div>
                    </div>
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <div class="input-group-text">
                                <input type="checkbox" aria-label="Checkbox for following text input">
                            </div>
                        </div>
                        <div class="form-control">Filter 3</div>
                    </div>
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <div class="input-group-text">
                                <input type="checkbox" aria-label="Checkbox for following text input">
                            </div>
                        </div>
                        <div class="form-control">(上面的filter仅用于ui展示，并不工作)</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-8 col-cards">
            <div class="row row-cards">
                <div class="col-6 col-card">
                    <div class="col-card__content">
                        <div class="card">
                            <img class="card-img-top" src="https://placeimg.com/300/100/any" alt="Card image cap">
                            <div class="card-body">
                                <h5 class="card-title">No Jquery</h5>
                                <p class="card-text">It's only pure Javascript.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-6 col-card">
                    <div class="col-card__content">
                        <div class="card">
                            <img class="card-img-top" src="https://placeimg.com/300/100/tech" alt="Card image cap">
                            <div class="card-body">
                                <h5 class="card-title">CSS Animations</h5>
                                <p class="card-text">it uses CSS animations</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-6 col-card">
                    <div class="col-card__content">
                        <div class="card">
                            <img class="card-img-top" src="https://placeimg.com/300/100/animals" alt="Card image cap">
                            <div class="card-body">
                                <h5 class="card-title">Just an idea</h5>
                                <p class="card-text">This is an exemple. It needs to be improved if you want to use it!</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-6 col-card">
                    <div class="col-card__content">
                        <div class="card">
                            <img class="card-img-top" src="https://placeimg.com/300/100/architecture" alt="Card image cap">
                            <div class="card-body">
                                <h5 class="card-title">Some issues</h5>
                                <p class="card-text">If you scroll while it's moving, you'll see an issue. There are probably more... I won't fix it but you can try ;)</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-6 col-card">
                    <div class="col-card__content">
                        <div class="card">
                            <img class="card-img-top" src="https://placeimg.com/300/100/nature" alt="Card image cap">
                            <div class="card-body">
                                <h5 class="card-title">Card title 4</h5>
                                <p class="card-text">This is a long paragraph. Write whatever you want!</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-6 col-card">
                    <div class="col-card__content">
                        <div class="card">
                            <img class="card-img-top" src="https://placeimg.com/300/100/people" alt="Card image cap">
                            <div class="card-body">
                                <h5 class="card-title">Card title 5</h5>
                                <p class="card-text">This is a long paragraph. Write whatever you want!</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<hr class="tg-hr">
<footer class="tg-footer">
    <a class='tg-link' href='https://timguignard.com' target='_blank'>timguignard.com</a>
    <a class='tg-link' href='https://twitter.com/timguignard' target='_blank'>Twitter</a>
    <a class='tg-link' href='https://dribbble.com/timguignard' target='_blank'>Dribbble</a>
    <a class='tg-link' href='https://www.behance.net/timguignard' target='_blank'>Behance</a>
</footer>

Animate a Bootstrap Grid

bootstrap, template, grid

编辑器支持Emmet

快捷键

Animate a Bootstrap Grid

bootstrap, template, grid

使用aos.js、css弹性框和网格布局实现的一款毛纺织品在线营销页面（响应式设计）

使用CSS和JavaScript构建一个可滑动的水平时间轴布局

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：