simple transition test

by umurkaragoz

HTML

<div class="container">
    <section id="content">
    </section>
</div>

CSS

.container {
            position: relative;
            float: left;
            width: 50%;
            height: 50vh;
            margin: 25vh 25%;
            background: lightgray;
        }
        #content.active { background: rgba(240, 128, 128, 0.5) }

        #content {
            position: absolute;
            top: -50%;
            height: 150%;
            cursor: pointer;
            width: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            transition: all 2s;
        }

        #content.active {
            top: 0;
        }

JavaScript

var content = document.querySelector('#content');
    content.onclick = function () {
        // toggle 'active' class on click
        content.classList.toggle('active');
        console.log('click');
    }