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