hyperHTML이 적용된 애니메이션

Question

CSS 입력 애니메이션과 DOM을 입력하는 hyperHTML 요소를 결합하려고합니다. 내 첫 번째 생각은 'onconnected'이벤트를 사용하는 것이지만 그 접근법에 타이밍 문제가 있습니다. 그리고 그렇게하는 것이 옳지는 않습니다. 특히 setTimeOut을 추가하여 작동하도록 만들 필요가없는 경우에는 특히 그렇습니다.

const onConnected = (e)=>{ 
    window.setTimeout(()=>{ 
     e.target.classList.add('is-entered'); 
    }, 0); 
} 

은 'onconnected'과의 setTimeout으로, 예를 들어 Code Pen를 참조하십시오.

CSS 애니메이션/전환과 함께 hyperHTML을 사용해 본 경험이있는 사람이 있습니까? 나는 아이디어와 모범 사례를보고 듣고 싶다.

Answer 1

나는 hyperHTML을 실험 해왔고 정말 좋아합니다. 이 라이브러리의 즐거움은 순전히 간단하게 실제 DOM이라는 것입니다. 즉, 코드와 DOM 사이에 레이어가 없음을 의미합니다.

이해하는 것하지 않을 수 있습니다

하지만 아름다움은 당신이 간단한 같은 애니메이션 페이드 작성하는 경우 : 다음

@keyframes fade-in { 
    from { opacity: 0 } 
    to { opacity: 1 } 
} 

와 같은 당신의 요소에 첨부 :

.comment { 
    animation: fade-in 1s; 
} 

을

DOM에 들어가 자마자 애니메이션이 적용됩니다.

일부 유스 케이스에서는 너무 간단하지만 요구되는 시나리오에서는 완벽한 IMO가됩니다.

당신의 생각을 알려주세요. https://codepen.io/alexandre-mouton-brady/pen/oGKwYQ