Fork me on GitHub
#reagent
<
2019-10-07
>
p-himik17:10:37

I'm a bit flabbergasted at the discovered behavior. I'm trying to use react-sortablejs and all is well except for the animations. The simplest version of the component does not animate anything. And at the same time, it works on its demo website. Naturally, I go to the debugger and place a breakpoint where it changes styles. And when I step over the line that assigns animation-related CSS properties, there is animation! When I turn the breakpoint into a logging one and log every CSS change - no animation. When I also log innerText of the element - it's being animated again! Does anyone have any clue as to why using innerText would trigger such behavior? Note that it works the same in both Google Chrome and Firefox.

p-himik06:10:16

Interesting, thanks. Although 1.10.1 should already contain the fix, and yet it still doesn't work.

thheller08:10:06

well if I search the current master for _repaint I find nothing. so it is the "fix" was just removed again

thheller08:10:00

ah no. it is still there, just moved

thheller08:10:13

still possible that this style of code is now removed by closure

p-himik09:10:17

Oh wow, you're absolutely right! It definitely got removed. Thank you. /sigh Fun stuff.

p-himik17:10:40

Heh, I'm actually trying to do the same thing with hx right now. 😄 But I don't think it's the same. As I mentioned the demo website written in JS works just fine. And all CSS properties are changed explicitly - there are no classes involved.

lilactown17:10:35

have you observed the same behavior when doing a release build?

p-himik17:10:39

Good idea, I'll try that soon.

lilactown17:10:24

it could also be that the element is being destroyed before it animates, depending on your code

p-himik17:10:57

My code is literally using that library in the simplest way possible - just a few divs with text content and static :data-id attributes. No specified behavior whatsoever.

p-himik17:10:11

Nope, nothing. hx didn't help, using release build didn't help either.

lilactown17:10:13

I’m seeing if I can recreate it

p-himik17:10:00

Yeah, I'm doing the same, trying to create a minimal setup.

p-himik17:10:31

Yep, the minimal setup works just the same.

p-himik17:10:45

(defn sortable-list []
  [:> Sortable {:options {:animation 150}}
   [:div {:data-id 1
          :style   {:padding 20
                    :border  "1px solid gray"}}
    "First item"]
   [:div {:data-id 2
          :style   {:padding 20
                    :border  "1px solid gray"}}
    "Second item"]
   [:div {:data-id 3
          :style   {:padding 20
                    :border  "1px solid gray"}}
    "Third item"]])

p-himik17:10:02

And Sortable is from react-sortablejs.

p-himik18:10:46

OK, I've found how to fix it. Sorta. react-sortablejs asks to install [email protected] but I was using a newer version. The animations seem to work just fine with 1.6.1. But they break on 1.8.0. But it still doesn't answer the question how the hell animations were suddenly working when I logged innerText.

lilactown18:10:53

best guess is doing an effect on the innerText of the element breaks up the browser’s batching?

p-himik18:10:46

I don't even know what "effect on the innerText" means. 🙂

lilactown18:10:15

observing the element in some way (accessing the Node’s innerText) might make it so that the browser doesn’t optimize the transition. I have no idea if that’s how it actually works, just literally guessing

p-himik18:10:12

Oh, hm. Interesting.

dazld22:10:26

What you’re seeing is that accessing properties on DOM elements can trigger a layout.

dazld22:10:33

Your friend innertext is one of them. The animations done via css are triggered when an element enters the DOM.

dazld22:10:25

React will reuse dom elements where it can meaning some tricks are needed to force it to create new dom elements if you want them to animate

dazld22:10:59

My favourite one is to use the key property. If it changes, react will make a new element.

dazld22:10:06

Causing the animation to run :)

dazld22:10:16

No mystery, it’s just how it works.

lilactown22:10:38

That might be why using static IDs was causing the animation not to trigger

lilactown22:10:55

I also see the key of each item in their example changes depending on order, which means when the state is changed with the new order, the key to the relevant items changes, triggering a new element to be created

lilactown22:10:42

thx for clearing up the mystery @U3ZUC5M0R! 🙂

dazld22:10:31

There’s a lot more on this topic, but you get the idea.

dazld22:10:24

declarative animation is super powerful

dazld22:10:23

Imagine trying to imperatively orchestrate all that..

p-himik06:10:05

Thanks! Although a bit strange that react-sortablejs stops showing animation when I update sortablejs to a newer version. And sortablejs definitely works just fine when used outside of React. So if lilactown's observation about keys is correct, it seems that changing keys is not enough. But maybe it's just sortablejs that does something strange when it's used with React.