javascript - 过渡动画点击只有效一次

Question

为什么我的页面转换只工作一次（之后动画不运行）？有人可以告诉我如何通过更改功能来完成这项工作side(el)吗？

这是我的 JavaScript：

function fall(el) {
        var elem = document.getElementById(el);
        elem.style.transition = "left 0.5s ease-in 0s";
        elem.style.left = "0px";

        document.getElementById('product').style.height="0px";
        document.getElementById('activity').style.opacity=0;


        document.getElementById('home').style.visibility="visible";
        document.getElementById('product').style.visibility="hidden";
        document.getElementById('activity').style.visibility="hidden";
        document.getElementById('work').style.visibility="hidden";
        document.getElementById('about').style.visibility="hidden";
}

function rotate(el) {
        var elem =document.getElementById(el);
        elem.style.transition = "height 0.5s linear 0s";
        elem.style.height = "100%";

        document.getElementById('home').style.transition = "left .5s ease-out 0s";
        document.getElementById('home').style.left = "-3500px";
        document.getElementById('activity').style.opacity=0;



        document.getElementById('home').style.visibility="hidden";
        document.getElementById('product').style.visibility="visible";
        document.getElementById('activity').style.visibility="hidden";
        document.getElementById('work').style.visibility="hidden";
        document.getElementById('about').style.visibility="hidden";
        }

function flip(el) {
        var elem =document.getElementById(el);
        elem.style.transition = "opacity 0.5s linear 0s";
        elem.style.opacity = 1;

        document.getElementById('product').style.height="0px";
        document.getElementById('home').style.left = "-3500px";


        document.getElementById('home').style.visibility="hidden";
        document.getElementById('product').style.visibility="hidden";
        document.getElementById('activity').style.visibility="visible";
        document.getElementById('work').style.visibility="hidden";
        document.getElementById('about').style.visibility="hidden";}

function cube(el) {
        var elem =document.getElementById(el);
        elem.style.transition = "right 0.5s ease-in-out 0s";
        elem.style.right = "0px";

        document.getElementById('home').style.left = "-3500px";
        document.getElementById('activity').style.opacity=0;
        document.getElementById('product').style.height="0px";

        document.getElementById('home').style.visibility="hidden";
        document.getElementById('product').style.visibility="hidden";
        document.getElementById('activity').style.visibility="hidden";
        document.getElementById('work').style.visibility="visible";
        document.getElementById('about').style.visibility="hidden";
}

function side(el) {
        var elem = document.getElementById(el);
        document.getElementById('about').className ="pt-page-ontop pt-page-rotateInNewspaper pt-page";


        document.getElementById('home').style.left = "-3500px";
        document.getElementById('activity').style.opacity=0;
        document.getElementById('product').style.height="0px";

        document.getElementById('home').style.visibility="hidden";
        document.getElementById('product').style.visibility="hidden";
        document.getElementById('activity').style.visibility="hidden";
        document.getElementById('work').style.visibility="hidden";
        document.getElementById('about').style.visibility="visible";
}