I'm using CanJS (with StealJS) to build a quizz app, and I have quizz-question
component that is rendered for each question!
I wonder how to make a transition with velocityjs each time quizz-question
component is removed for answerd question and inserted for the new question?
Any help is appreciated!
A key element with using transitions on changing data is that the transition has to complete before removing the element from the DOM (which would remove the element from display immediately).
As far as I know, CanJS doesn't have a mechanism to wait for a process before removal of nodes, so the appropriate workaround is to have a node that isn't removed when content changes. You can structure your markup inside of that node, but the Velocity transition has to happen on the permanent node to make the transition successful.
For the example of fading in and fading out, setting the content to put inside the transition container should use an async setter (with
val
andresolve
arguments) to make the transition work correctly. First fade out (and use the returned promise to wait), then update the markup with the new content (usingresolve()
), then fade in. I made a JSBin that demonstrates this concept, though the content inside the transition is very simple in the demo.https://jsbin.com/lesagebomu/edit?html,js,output
In the case of a
quizz-question
component, you'd want to render the whole component inside of the div infade-in
. There's probably also a way to generalize this into a higher-order component using e.g.<div class="fade-in"><content /></div>
and some data manipulation.