Animations?

[ebremmer]

How to best deal with animations, ex. post render?

[WebReflection]

you invoke the update or render, instantly after would just do it?

[ebremmer]

it probably would but maintaining such code would be less than ideal, looking for some good construct to wrap it nicely.

[WebReflection]

sorry, what?

[ebremmer]

would you care for good example then?

[WebReflection]

I don't even know your use case or how your code would look like, how can I possibly help?

[ebremmer]

Andrea, any example that would show how to deal with animations would be of help and am pretty sure would help others like me adopt this wonderful thing.

In my particular case I wonder how to trigger animation when content is rendered, imagine when you hit enter to add todo, your model state changes causing update, when new element shows up, what's the best way to trigger animation (node class list update).

[WebReflection]

I've changed one demo-test to use animations, if you mean CSS animations.

basically the CSS bit is

    .fading {
      animation: fadein .600s ease-in;
    }
    @keyframes fadein {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }

and the JS part is

  function update() {
    render`
      Incremental updates for ${items.length} items
      <form onsubmit="${e => confirm('Are you sure ?')}">${
        items.map((item, i) => hyperHTML.wire(item)`
        <input class="fading" name="${'input-' + i}">`)
      }<input type="submit">
      </form>
    `;
  }

Since nodes already there won't ever change, unless you change the wire around them, there's really nothing special to do there.

Does this answer your question?

[WebReflection]

forgot the live demo: https://webreflection.github.io/hyperHTML/test/incremental.html

[ebremmer]

You are right, my poor communication failed here, I was thinking about transitions and writing animations.

I want to kick off transition by changing adding class.

[WebReflection]

use <node class="${model.class}"> to do that?

[ebremmer]

it did help, thank you!