자바 스크립트를 사용하여 클래스를 제거하여 CSS 전환 트리거링

Question

프로그래밍 방식으로 요소에서 클래스를 제거 할 때 CSS 전환이 실행되지 않는 이유를 파악하는 데 문제가 있습니다.

기본적으로 순수 Javascript를 사용하여 점진적으로 향상되고 무한히 회전하는 회전식 컨베이어를 만들려고합니다.

기본 아이디어는 사용자가 왼쪽 또는 오른쪽으로 스크롤하기 위해 클릭 할 때 첫 번째 또는 마지막 요소가 상위 요소에서 뽑아 내고 오른쪽 또는 왼쪽에 스크롤 방향에 따라 적절한 위치에 추가되거나 추가됩니다. 사용자의 클릭

HTML :

<div id="scroller"> 
    <ul> 
     <li> 
      <a> 
       <img src="..."> 
      </a> 
     </li> 
     ..... more li elements 
     <li> 
      <a> 
       <img src="..."> 
      </a> 
     </li> 
    </ul> 
</div> 

CSS :

#scroller { 
    position: absolute; 
    left: 0em; 
    height: 8em; 
    width: 400em; 
} 
#scroller ul { 
    list-style: none; 
} 
#scroller ul li { 
    overflow: hidden; 
    float: left; 
    height: 8em; 
    width: 8em; 
    transition: width 1s ease; 
} 
#scroller ul li.hide { 
    width: 0em; 
} 
#scroller ul li a img { 
    width: 8em; 
} 

JS (예를 들어, 마우스 오른쪽 버튼으로 클릭 이벤트를 스크롤) :

/** Remove the element from the end of the list, add the hide class */ 
var node = this.list.removeChild(this.items[(this.items.length - 1)]); 
/** Add the hide class to the node */ 
node.className += ' hide'; 
/** Insert the node at the beginning of the scroller */ 
this.list.insertBefore(node, this.items[0]); 
/** Remove the hide class to trigger the transition animation */ 
node.className = node.className.replace('hide', ''); 

여기

는 관련 코드 모든 것이 최악이다. 임금 잘, ul의 주위에 정확하게 이동되는 품목의 점에서, 그래서 저것은 문제가 아니다.

"hide"클래스를 제거하여 li 요소의 너비를 변경하면 CSS 전환이 적용되지 않는 것이 문제입니다.

CSS 전환을 지원할 수있는 것보다 브라우저에서 부드러운 스크롤 효과를 만들기를 바랬습니다.

미리 JS 라이브러리를 사용하지 않으셔서 감사드립니다! :)

Answer 1

setTimeout 및 transitionend 이벤트의 콤보를 사용하십시오. transitionend에 대한 추가 정보를 원하시면 여기를

는 봐 : CSS3 transition events

/** Remove the element from the end of the list, add the hide class */ 
 
one = document.getElementById('one'); 
 
two = document.getElementById('two'); 
 
list = document.getElementById('list'); 
 

 
/** Add the hide class to the node */ 
 
two.addEventListener('transitionend', end, false); 
 
setTimeout(function(){ 
 
    two.className += ' hide'; 
 
}, 0) 
 

 
function end(){ 
 
    /** Insert the node at the beginning of the scroller */ 
 
    list.insertBefore(two, one); 
 
    /** Remove the hide class to trigger the transition animation */ 
 
    setTimeout(function(){ 
 
    two.className = two.className.replace('hide', ''); 
 
    }, 0) 
 
}

#scroller { 
 
    position: absolute; 
 
    left: 0em; 
 
    height: 8em; 
 
    width: 400em; 
 
} 
 

 
#scroller ul { 
 
    list-style: none; 
 
} 
 

 
#scroller ul li { 
 
    overflow: hidden; 
 
    float: left; 
 
    height: 8em; 
 
    width: 8em; 
 
    transition: width 1s ease; 
 
} 
 

 
#scroller ul li.hide { 
 
    width: 0em; 
 
} 
 

 
#scroller ul li a { 
 
    width: 8em; 
 
    background-color:red; 
 
}

<div id="scroller"> 
 
    <ul id="list"> 
 
     <li id="one"> 
 
      <a> 
 
       One 
 
      </a> 
 
     </li> 
 
     <li id="two"> 
 
      <a> 
 
       Two 
 
      </a> 
 
     </li> 
 
    </ul> 
 
</div>