javascript - css3/javascript を使用して div で複数のオブジェクトを移行する

Question

ページが読み込まれるとすぐに同時に移行したい 3 つのオブジェクト (div) があります。これをアニメーション化するために、1 つのオブジェクトだけで完全に機能する JavaScript を少し使用していますが、JavaScript を書き直して 3 つのオブジェクトすべてをアクティブにし、各オブジェクトの個別のスタイリングに従う方法がわかりません。

Mozilla Developer Network のサイト ( https://developer.mozilla.org/en/CSS/CSS_transitions/ )で「Using transition events to animate an object」の例を見つけましたが、残念ながらフォーラムが無効になっているため、できませんでした。解答を見つける。

基本的な HTML は次のとおりです。

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

背景画像を持つ 2 つの div があります。1 つは左側にあるオブジェクトのスタイリングを表し、右側の位置にあるスタイリングです。

1 つのオブジェクトの 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をいじりました。ここや Web を調べたところ、セレクターに関する情報と、複数のセレクターをうまく使用する方法を見つけました。次のような複数のセレクターを使用してみました。

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についても同じ

3 つのオブジェクト (div) すべてを含むように JavaScript 関数を書き直して、ページが読み込まれるとすぐにそれらを同時に動作させる方法を誰かが知っているか、知っているなら、私は大いに感謝します。前もって感謝します。

score 1 · Accepted Answer

私はあなたのための解決策があると思います。同じ例に基づいて、今日は小さなことをしていましたが、これはうまくいきました。基本的に、ターンをクリックしてターンが終了したときに他の 3 つの div を遷移させる「オープナー」が 1 つあります。それぞれに独自の速度があります。そして戻って-クリックして閉じると-最初の3つのdivが閉じられ、これが終了すると-「オープナー」が終了アニメーションに変わります。

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';
}

この助けを願って、これはあなたが探していたものです

ベストピフォン

javascript - css3/javascript を使用して div で複数のオブジェクトを移行する

1 に答える 1

Related

Reference