ページ遷移が 1 回しか機能しない (その後アニメーションが実行されない) のはなぜですか? 関数を変更してこれを機能させる方法を誰かに教えてもらえます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";
}