There's a toggle method in Element.classList that can be used like this in your example (also, check the animationend event:

<script>
    document.addEventListener('click', function(e) {
        e = e || window.event;
        var target = e.target || e.srcElement;

        target.addEventListener('animationend', function() {
            if (this.classList.contains('box-rest')) {
                this.className = 'box';
            }
        });

        if (target.classList.contains('box')) {
            if (target.classList.contains('box-active')) {
                target.classList.toggle('box-rest');
            } else {
                target.classList.toggle('box-active');
            }
        }
    }, false);
</script>

You can use the toggle method from Element.classList and the animationend event in your example:

<script>
    Array.prototype.slice.call(document.querySelectorAll(".box")).forEach(function(el) {
        el.addEventListener('click', click());
        el.addEventListener('animationend', resetBox());
    });

    function click() {
        return function(e) {
            var target = e.target || e.srcElement;

            if (target.classList.contains('box')) {
                if (target.classList.contains('box-active')) {
                    target.classList.toggle('box-rest');
                } else {
                    target.classList.toggle('box-active');
                }
            }
        };
    }

    function resetBox() {
        return function(e) {
            var target = e.target || e.srcElement;

            if (target.classList.contains('box-rest')) {
                target.className = 'box';
            }
        };
    }
</script>

There's a toggle method in Element.classList that can be used like this in your example:

<script>
    document.addEventListener('click', function(e) {
        e = e || window.event;
        var target = e.target || e.srcElement;

        if (target.classList.contains('box')) {
            if (target.classList.contains('box-active')) {
                target.classList.toggle('box-rest');
            } else {
                target.classList.toggle('box-active');
            }
        }
    }, false);
</script>

There's a toggle method in Element.classList that can be used like this in your example (also, check the animationend event:

<script>
    document.addEventListener('click', function(e) {
        e = e || window.event;
        var target = e.target || e.srcElement;

        target.addEventListener('animationend', function() {
            if (this.classList.contains('box-rest')) {
                this.className = 'box';
            }
        });

        if (target.classList.contains('box')) {
            if (target.classList.contains('box-active')) {
                target.classList.toggle('box-rest');
            } else {
                target.classList.toggle('box-active');
            }
        }
    }, false);
</script>