I'm creating a plugin that will handle CSS transitions automatically. In certain situations where you would've created a can.List, you would do so with can.TransitionList and any objects listed within (can.Maps) are extended with a @transition attribute (which is a can.TransitionMap).
Here is how it'd work in a can.Component:
- init:
- {
- this.scope.items.push( {message:"asdf"} );
- },
- scope:
- {
- items: new can.TransitionList()
- }
- {{#each items}}
- <div data-transition-id="{{@transition.id}}">
- {{message}}
- </div>
- {{/each}}
It removes most of the transition stuff from your visible code. This mostly works fine, except that upon inserting the @transition attribute, the DOM code I have in a can.batch.start cannot find the element I'm targeting even though I can see it in dev tools. My only estimation is that can.batch.start's callback is running too soon. Here's the code:
- can.TransitionMap = can.Map.extend(
- {
- mapCount: 0
- },
- {
- init: function()
- {
- can.batch.start( this.proxy(function()
- {
- // empty collection, yet it's visible in dev tools elements tree
- console.log( can.$("[data-transition-id="+this.attr("id")+"]") );
- }) );
- this.attr("id", this.constructor.mapCount++);
- can.batch.stop();
- }
- });
- can.TransitionList = can.List.extend(
- {
- init: function()
- {
- this.bind("add", function(event, newElements, index)
- {
- can.batch.start();
- newElements.forEach(function(element, i, list)
- {
- element.attr( "@transition", new can.TransitionMap() );
- });
- can.batch.stop();
- });
- }
- });