当前位置： 文江博客话题详情

使用 css3/javascript 在 div 之间转换多个对象

发布于 2024-12-12 03:06:27 字数 2850 浏览 0 评论 0原文

我有 3 个对象（div），我想在页面加载时同时转换它们。为了帮助制作动画，我使用了一点 javascript，它仅适用于一个对象，但我不确定如何重写 javascript 以激活所有 3 个对象遵守每个对象的单独样式。

我在 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");

and

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

和 el.className 相同

如果有人有任何想法或知道如何重写 javascript 函数以包含所有 3 个对象（div），并让它们在页面加载我将不胜感激。先感谢您。

原文

I have 3 objects (divs) that I want to transition simultaneously as soon as the page loads. To help animate this I am using a little bit of javascript which works perfectly with just the one object but I'm not sure how to rewrite the javascript to activate all 3 objects obey each objects individual styling.

I found an example of "Using transition events to animate an object" on the Mozilla Developer Network site ( https://developer.mozilla.org/en/CSS/CSS_transitions/ ), but unfortunately they disabled their forums so I couldn't find a solution.

Here is the basic HTML:

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

I have 2 divs with an background-image, one to represent the object's styling while on the left and it's styling on the right positions.

Here is the CSS for the one object:

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

And here is the Javascript that calls up this object and animates it to move right across the screen and then back again:

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

Now, my other 2 elements I want to transition at the same time are named .cloud2Left (and .cloud2Right) and .cloud3Left (and .cloud3Right) each with it's own specific styling (position, left %, transition rate, etc).

I've scoured the web for a solution and have messed around with the js. I looked here and around the Web and found information about selectors and how to use multiple selectors with no luck. I've tried using the multiple selectors like such:

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

and

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

and the same for the el.className

If anyone has any ideas or knows how to rewrite the javascript function to include all 3 objects (divs) and have them work simultaneously as soon as the page loads I would be greatly appreciative. Thank you in advance.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

┾廆蒐ゝ 2024-12-19 03:06:27

我想我有解决方案给你。今天我根据同一个例子做了一件小事，这对我有用。
基本上我有一个“开场白”，它点击了回合，并在回合结束时让其他 3 个 div 进行过渡。每个人都有自己的速度。然后返回 - 当单击关闭时 - 前 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';
}

希望这有帮助，这就是您正在寻找的

最佳内容
皮丰

I think I have solution for you. I was doing a small thing today, based on the same example and this worked for me.
Basically I have one 'opener' which clicked turns and lets 3 other divs transition when turn is finished. Each one with its own speed. And back - when clicked to close - first 3 divs are closing and when this is finished - 'opener' turns finishing animation.

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 */
}

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

Hope this help, and this is what you were looking for

Best
Pifon

回复 原文
~没有更多了~

关于作者

酷遇一生

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

胡图图

文章 0 评论 0

zt006

文章 0 评论 0

z祗昰~

文章 0 评论 0

冰葑

文章 0 评论 0

野の

文章 0 评论 0

天空

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文