CODEWITHSUNDEEP
javascripthyperhtml
Esben Juul Mortensen
Esben Juul Mortensen

Reputation: 11

Animations with hyperHTML

I am trying to combine CSS-animation with hyperHTML elements that enters the DOM. My first thought was to use the 'onconnected' event but there is a timing issue with that approach. And it doesn't feel right to do it that way -especially not if I need to add a setTimeOut to make it work. 

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

See Code Pen for example with 'onconnected' and setTimeout.

Are there anyone who has experience in working with CSS animations/transitions together with hyperHTML? I would love to see or hear ideas and best practice.

Upvotes: 0

Views: 271

Answers (2)

Barney
Barney

Reputation: 16456

It turns out not even an asynchronous tick is reliable for this problem. The issue is that browsers will try to avoid a reflow where necessary and will not necessarily paint the implicit initial state.

This is a tricky problem for all DOM libs, because it requires second-guessing eager browser optimisations, so I typically handle this in application code. The reliable fix is to force the browser to reflow by interpolating live computed DOM properties in between the two states — this indicates that the browser needs to determine an accurate current state of element positioning which in turn demands that current styles are fully computed:

e.target.getBoundingClientRect()

/* apply new DOM state */

Upvotes: 0

Alexandre Mouton-Brady
Alexandre Mouton-Brady

Reputation: 11

I've been experimenting with hyperHTML and I really love it. The joy of this library is that it's purely and simply the real DOM which means that there are no layers between your code and the DOM.

That might not seem to make sense but the beauty is that if you create a simple fade-in animation like that:

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

and then attach it to your element like that:

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

it's going to animate it as soon as it enters the DOM.

This is perhaps too simple for some use cases, but for the scenarios your asked, it would be perfect IMO.

Let me know what you think.

Here is the forked codepen with live example: https://codepen.io/alexandre-mouton-brady/pen/oGKwYQ

Upvotes: 1

Related Questions