advanced transition test

by umurkaragoz

HTML

<div class="container">
    <section class="content move-up">
    </section>
</div>
<div class="container">
    <section class="content move-down">
    </section>
</div>
<div class="container">
    <section class="content move-right">
    </section>
</div>
<div class="container">
    <section class="content move-left">
    </section>
</div>

CSS

.container {
            position: relative;
            float: left;
            width: 30%;
            height: 30vh;
            margin: 10vh 10%;
            background: lightgray;
        }

        .content {
            position: absolute;
            cursor: pointer;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            transition: all 2s;
        }
        .content.active { background: rgba(240, 128, 128, 0.5) }

        .content.move-down { top: -30%; height: 130%; }
        .content.move-down.active { top: 0; }

        .content.move-up { top: 0; height: 130%; }
        .content.move-up.active { top: -30%; }

        .content.move-left { left: 0; width: 130%; }
        .content.move-left.active { left: -30%; }

        .content.move-right { right: 0; width: 130%; }
        .content.move-right.active { right: -30%; }

JavaScript

var contents = document.querySelectorAll('.content');

    // toggle 'active' class on click for all ".content" elements
    for (var i = 0; i < contents.length; i++) {
        contents[i].onclick = function (e) {
            e.currentTarget.classList.toggle('active');
            console.log('click');
        }
    }