페이지가로드되는 즉시 동시에 전환 할 객체 (div)가 3 개 있습니다. 이 애니메이션을 돕기 위해 하나의 객체로 완벽하게 작동하는 자바 스크립트를 사용하고 있지만, 자바 스크립트를 다시 작성하여 모든 3 개의 객체를 개별적으로 스타일링하는 방식을 따르는 방법을 모르겠습니다.css3/javascript를 사용하여 div에 여러 객체 전환
Mozilla 개발자 네트워크 사이트 (https://developer.mozilla.org/en/CSS/CSS_transitions/)에서 "전환 이벤트를 사용하여 객체를 애니메이션화하는"예제를 발견했지만 불행히도 포럼을 비활성화하여 해결책을 찾지 못했습니다. 내가있는 동안 왼쪽에있는 개체의 스타일을 표현하기 위해, 배경 이미지 하나를 두 div가 있고 그 오른쪽 위치에 스타일의
<body onload="runDemo()">
<div id="cloud-comtainter">
<div class="cloud1Right"></div>
<div class="cloud2Right"></div>
<div class="cloud3Right"></div>
</div>
</body>
:
다음은 기본적인 HTML입니다. 여기
는 하나의 객체에 대한 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;
}
을 그리고 여기이 객체를 호출하고 다시 다음 오른쪽으로 화면을 가로 질러 이동하는 데 애니메이션 자바 스크립트입니다 :
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;
}
이제는 전환 할 다른 두 요소를 .cloud2Left (및 .cloud2Right) 및 .cloud3Left (및 .cloud3Right)라는 고유 한 스타일 (위치, 왼쪽 %, 전환율 등)로 명명합니다.
나는 해결책을 찾기 위해 웹을 샅샅이 뒤졌고 js를 뒤범벅했다. 나는 여기 저기 웹을 보았고 셀렉터에 대한 정보와 여러 셀렉터를 사용하는 법을 알았다. 사람이 어떤 아이디어를 가지고 또는 자바 스크립트를 다시 작성하는 방법을 알고있는 경우 el.className
에 대한
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");
과 같은 : I는 같은 여러 선택기를 사용하여 시도했다 함수를 사용하여 3 개의 모든 객체 (div)를 포함하고 페이지가로드되는 즉시 작업을 수행하도록하면 크게 도움이됩니다. 미리 감사드립니다.