How to use CanJS with VelocityJS?

Question

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!

Answer 1

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 and resolve 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 (using resolve() ), 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 in fade-in . There's probably also a way to generalize this into a higher-order component using eg <div class="fade-in"><content /></div> and some data manipulation.

Answer 2

Another way to do this would be to dispatch events on the elements being added and removed and then listening to these events in the view:

    <li on:click="../removeQuestion(question)"
        on:removing:by:question="fadeOut()"
        on:inserting:by:question="fadeIn()">{{question.name}}</li>

You can see this here: https://jsbin.com/lepuxaq/edit?html,js,output