search

zaceno / hyperapp-transitions

Animate Hyperapp components as they are appear, disappear and move around on the page.
MIT License
81 stars 8 forks source link

First message in example is not transitioned #4

Closed cjh9 closed 6 years ago

cjh9 commented 6 years ago

Cool library, are you using FLIP transitions for this?

  1. Go to this example: https://codepen.io/zaceno/pen/awRxaN
  2. Press new message twice.

The first message is not transitioned down smoothly.

zaceno commented 6 years ago

@cjh9 yes, it's FLIP transitions, basically.

Thanks for pointing out the odd behavior in that example!. I actually somewhat recently noticed that wierdness myself, and also the Carousel example doesn't work properly.

I'm not sure what broke it or when it broke. I haven't changed anything significant in a while, and most of the time when I casually check in on the examples I'm using Safari -- where the examples all work fine, for some reason.

Since it's broken in Firefox and Chrome both, I'm going to rule out recent browser updates. That leaves hyperapp. There have been some changes in the render scheduling, which might be causing this.

I fully intend to look in to it soon. (You're welcome to help out with debugging if you feel like it). Most likely, however, I will rewrite the FLIP algo since I suspect the new render scheduling in hyperapp actually might allow some significant simplifications.

cjh9 commented 6 years ago

@zaceno

Sure, that sounds great :) I will see if I can help you, need to read up on the source. By the way, have you checked Vues animation API?

https://vuejs.org/v2/guide/transitions.html#List-Transitions

It is so simple! Just wrap in a transition group. I would love if we can get something like that in the future :)

zaceno commented 6 years ago

@cjh9 I rewrote the whole thing, and simplified it quite a bit. It's a little closer to vue transitions now too :) I did end up removing some features I don't think were used much. If you're missing anything, feel free to open another issue. 🎉