1. 首頁
  2. 問答
  3. 使用css3/javascript跨多個對象轉換多個對象

使用css3/javascript跨多個對象轉換多個對象

2011-10-28 73 views
1

我有3個對象（div），我希望在頁面加載後立即同時轉換。爲了幫助創建動畫，我使用了一點點的JavaScript，它只與一個對象完美協作，但我不確定如何重寫JavaScript以激活所有3個對象，從而遵守每個對象的單獨樣式。使用css3/javascript跨多個對象轉換多個對象

我在Mozilla開發人員網絡站點（https://developer.mozilla.org/en/CSS/CSS_transitions/）上找到了「使用轉換事件來爲對象設置動畫效果」的示例，但不幸的是他們禁用了他們的論壇，因此找不到解決方案。

這裏是基本的HTML：

<body onload="runDemo()"> 
    <div id="cloud-comtainter"> 
<div class="cloud1Right"></div> 
    <div class="cloud2Right"></div> 
    <div class="cloud3Right"></div> 
    </div> 
</body>

我有2周的div的背景圖片，一個代表，而左邊的對象的造型，它的右側位置的造型。

下面是一個對象的CSS：

.cloud1Right { 
    width: 22em; 
    height: 9.375em; 
    background-image:url(../Images/header/clouds/clouds_biodesign-white.png); 
    background-position:center; 
    left:2%; 
    position:absolute; 
    top: 5%; 
    z-index:1; 
    -webkit-transition-property:left; 
    -webkit-transition-duration: 25s; 
    -moz-transition-property:left; 
    -moz-transition-duration: 25s; 
    -o-transition-property:left; 
    -o-transition-duration: 25s; 
    -ms-transition-property:left; 
    -ms-transition-duration: 25s; 
} 
.cloud1Left { 
    width: 22em; 
    height: 9.375em; 
    background-image:url(../Images/header/clouds/clouds_biodesign-white.png); 
    background-position:center; 
    left:90%; 
    position:absolute; 
    top: 5%; 
    z-index:1; 
    -webkit-transition-property:left; 
    -webkit-transition-duration: 25s; 
    -moz-transition-property:left; 
    -moz-transition-duration: 25s; 
    -o-transition-property:left; 
    -o-transition-duration: 25s; 
    -ms-transition-property:left; 
    -ms-transition-duration: 25s; 
}

這裏是調用了這個對象，並激活它對面的屏幕再次移動，然後使用Javascript：

function runDemo() { 
    var el = updateTransition(); 
    // Set up an event handler to reverse the direction 
    // when the transition finishes. 

    el.addEventListener("transitionend", updateTransition, true); 
} 

function updateTransition() { 
    var el = document.querySelector("div.cloud1Left"); 

    if (el) { 
     el.className = "cloud1Right"; 
    } else { 
     el = document.querySelector("div.cloud1Right"); 
     el.className = "cloud1Left"; 
    } 

    return el; 
}

現在，我想同時轉換的其他2個元素分別命名爲.cloud2Left（和.cloud2Right）和.cloud3Left（和.cloud3Right），每個元素都有自己特定的樣式（位置，左側％，轉換率等）。

我已經在網上尋找解決方案，並與js搞混了。我查看了這裏和周圍的網絡，發現了有關選擇器的信息，以及如何在沒有運氣的情況下使用多個選擇器。

var el=document.querySelector("div.cloud1Left, div.cloud2Left, div.cloud3Left");

和

var el=document.querySelector("div.cloud1Left"); 
var el=document.querySelector("div.cloud2Left"); 
var el=document.querySelector("div.cloud3Left");

和同爲el.className

如果任何人有任何意見或知道如何改寫JavaScript的：我已經使用了多種選擇像這樣的嘗試函數來包含所有3個對象（div），並在頁面加載時讓它們同時工作，我將非常感激。先謝謝你。

來源

2011-10-28 Sean H. Smith

回答

1

我想我有解決方案給你。我今天做了一件小事，基於同樣的例子，這對我很有幫助。 基本上我有一個'開叫者'，它點擊轉動，讓3個其他divs在轉彎結束時轉換。每個人都有自己的速度。然後 - 當點擊關閉時 - 前3個div將關閉，當這個完成時 - 'opener'將結束動畫。

HTML：

<div id="opener" onclick="switch_toolbox('open')" class="vertical">Food Toolbox</div> 
<div id="tools"> 
    <h2 id="toolbox_title" class="title">Appliances</h2> 
</div> 
<div id="freezer"> 
    <h2 id="food_title" class="title">Food store</h2> 
</div> 
<div id="spicebox"> 
    <h2 id="spices_title" class="title">Spices</h2> 
</div>

CSS：

#opener{ 
    display:block; 
    overflow:hidden; 
    width:8.8em; 
    background-color:#F00; 
    font-weight:600; 
    font-size:1.5; 
    padding:0 0.5em; 
    cursor:pointer; 
    transition:all 0.5s ease 0s; 
    -moz-transition:all 0.5s ease 0s; /* Firefox 4 */ 
    -webkit-transition:all 0.5s ease 0s; /* Safari and Chrome */ 
    -o-transition:all 0.5s ease 0s; /* Opera */ 
    -ms-transition:all 0.5s ease 0s; /* IE */ 

} 
.vertical{ 
    -webkit-transform: rotate(90deg), translate(3em,3em); 
    -moz-transform: rotate(90deg) translate(3em,3em); 
    -o-transform: rotate(90deg) translate(3em,3em); 
    -ms-transform: rotate(90deg) translate(3em,3em); 
    transform: rotate(90deg) translate(3em,3em); 
} 
.horizontal{ 
    -webkit-transform: rotate(0), translate(0,0); 
    -moz-transform: rotate(0) translate(0,0); 
    -o-transform: rotate(0) translate(0,0); 
    -ms-transform: rotate(0) translate(0,0); 
    transform: rotate(0) translate(0,0); 
} 

#tools{ 
    display:block; 
    overflow:hidden; 
    height:1.2em; 
    width:0; 
    transition:width 1.5s ease 0s, height 1s ease 0s; 
    -moz-transition:width 1.5s ease 0s, height 1s ease 0s; /* Firefox 4 */ 
    -webkit-transition:width 1.5s ease 0s, height 1s ease 0s; /* Safari and Chrome */ 
    -o-transition:width 1.5s ease 0s, height 1s ease 0s; /* Opera */ 
    -ms-transition:width 1.5s ease 0s, height 1s ease 0s; /* IE */ 
} 
#freezer{ 
    display:block; 
    overflow:hidden; 
    height:1.2em; 
    width:0; 
    transition:width 1s ease 0.5s, height 1s ease 0s; 
    -moz-transition:width 1s ease 0.5s, height 1s ease 0s; /* Firefox 4 */ 
    -webkit-transition:width 1s ease 0.5s, height 1s ease 0s; /* Safari and Chrome */ 
    -o-transition:width 1s ease 0.5s, height 1s ease 0s; /* Opera */ 
    -ms-transition:width 1s ease 0.5s, height 1s ease 0s; /* IE */ 
} 

#spicebox{ 
    display:block; 
    overflow:hidden; 
    height:1.2em; 
    width:0; 
    transition:width 0.5s ease 1s, height 1s ease 0s; 
    -moz-transition:width 0.5s ease 1s, height 1s ease 0s; /* Firefox 4 */ 
    -webkit-transition:width 1.5s ease 1s, height 1s ease 0s; /* Safari and Chrome */ 
    -o-transition:width 0.5s ease 1s, height 1s ease 0s; /* Opera */ 
    -ms-transition:width 0.5s ease 1s, height 1s ease 0s; /* IE */ 
}

最後JS：

function switch_toolbox(direction){ 
    var spicebox = document.getElementById('spicebox'); 
    var opener = document.getElementById('opener'); 
    if(direction=='close'){ 
     closeem(); 
     spicebox.addEventListener("transitionend", closeme, false); 
    }else{ 
     openme(); 
     opener.setAttribute('onclick','switch_toolbox("close")'); 
     opener.addEventListener("transitionend", openem, false); 
    } 
    return false; 
} 
function openme(){ 
    var opener = document.getElementById('opener'); 
    opener.setAttribute('class','horizontal'); 
} 
function closeme(){ 
    var spicebox = document.getElementById('spicebox'); 
    spicebox.removeEventListener("transitionend", closeme, false); 
    var opener = document.getElementById('opener'); 
    opener.removeEventListener("transitionend", openem, false); 
    opener.setAttribute('class','vertical'); 
    opener.setAttribute('onclick','switch_toolbox("open")'); 
    var tools = document.getElementById('tools'); 
} 
function openem(){ 
    var opener = document.getElementById('opener'); 
    opener.removeEventListener("transitionend", openem, false); 
    var spicebox = document.getElementById('spicebox'); 
    spicebox.removeEventListener("transitionend", closeme, false); 
    var tools = document.getElementById('tools'); 
    var freezer = document.getElementById('freezer'); 
    tools.style.backgroundColor='#EBD3A3'; 
    tools.style.width='20em'; 
    freezer.style.width='20em'; 
    freezer.style.backgroundColor='#B7CEEC'; 
    spicebox.style.width='20em'; 
    spicebox.style.backgroundColor='#FFA500'; 
} 
function closeem(){ 
    var tools = document.getElementById('tools'); 
    var freezer = document.getElementById('freezer'); 
    var spicebox = document.getElementById('spicebox'); 
    freezer.style.height='1.2em'; 
    spicebox.style.height='1.2em'; 
    tools.style.height='1.2em'; 
    tools.style.width='0'; 
    freezer.style.width='0'; 
    spicebox.style.width='0'; 
}

希望這有助於，而這也正是你要找的

最佳 Pifon

來源

2011-11-01 00:05:38 Pifon

相關問題

 相關問題