This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2019-10-07
Channels
- # aleph (1)
- # announcements (2)
- # babashka (1)
- # beginners (49)
- # calva (1)
- # cider (5)
- # clj-kondo (14)
- # cljdoc (11)
- # cljsrn (6)
- # clojure (120)
- # clojure-austin (1)
- # clojure-europe (6)
- # clojure-finland (3)
- # clojure-italy (29)
- # clojure-nl (6)
- # clojure-spec (38)
- # clojure-uk (14)
- # clojurescript (65)
- # code-reviews (8)
- # cursive (20)
- # data-science (1)
- # datascript (5)
- # datomic (57)
- # emacs (6)
- # figwheel-main (2)
- # fulcro (32)
- # funcool (1)
- # jackdaw (7)
- # jobs (3)
- # joker (7)
- # kaocha (8)
- # keechma (3)
- # nrepl (7)
- # off-topic (25)
- # quil (3)
- # re-frame (10)
- # reagent (43)
- # remote-jobs (1)
- # ring (1)
- # shadow-cljs (173)
- # sim-testing (1)
- # spacemacs (1)
- # sql (3)
- # tools-deps (34)
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.
Interesting, thanks. Although 1.10.1 should already contain the fix, and yet it still doesn't work.
well if I search the current master
for _repaint
I find nothing. so it is the "fix" was just removed again
Oh wow, you're absolutely right! It definitely got removed. Thank you. /sigh Fun stuff.
I think this is probably due to https://stackoverflow.com/questions/22093141/adding-class-via-js-wont-trigger-css-animation
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.
it could also be that the element is being destroyed before it animates, depending on your code
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.
(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"]])
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
.
best guess is doing an effect on the innerText of the element breaks up the browser’s batching?
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
https://gist.github.com/paulirish/5d52fb081b3570c81e3a is a list of them
Your friend innertext is one of them. The animations done via css are triggered when an element enters the DOM.
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
My favourite one is to use the key property. If it changes, react will make a new element.
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
thx for clearing up the mystery @U3ZUC5M0R! 🙂
https://flarework.com/city/ for example
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.