Pablo

transition()

See MDN’s guide to CSS transitions for the possibilities.

Get a key-value object of the element’s transitions.

/* Given an element with a CSS transition... */
var elem = Pablo.rect().transition('opacity 1s, fill 2s');

// get its transitions
alert(elem.transition());

transition(true)

As above, but returns an array of transform objects.

/* Given an element with a CSS transition... */
var elem = Pablo.rect().transition('opacity 1s, fill 2s');

// get its transitions
alert(elem.transition(true));

transition(name)

Get an array of values for the named transition.

/* Given an element with a CSS transition... */
var elem = Pablo.rect().transition('opacity 1s, fill 2s');

// Get a named transition
alert(elem.transition('fill'));

transition(property, duration)

Creates one or more CSS transitions on each element in the collection. When a transition is set, whenever the named CSS property is modified, the change will take place over the specified duration.

property is the name of a CSS property and duration is the length of the transition in milliseconds.

In this example, the stroke-width CSS property is transitioned. Click the circles to start the transition.

var container = Pablo(demoElement),
    svg = container.svg({width:'100%', height:160}),
    circles = Pablo.circle().duplicate(2).attr({
        r:  50,
        cx: function(el,i){return i * 140 + 80},
        cy: 80,
        stroke: 'lightblue',
        fill: 'darkblue',
        cursor: 'pointer'
    }).appendTo(svg);

// Transition any changes to `stroke-width` over 1000ms
circles.transition('stroke-width', 1000);

container.on('click', function(){
    // Change the `stroke-width`
    circles.css('stroke-width', 60);

    // Change it back after a delay
    window.setTimeout(function(){
        circles.css('stroke-width', 0);
    }, 750);
});

alert('Click me');

CSS transitions and transforms

transition() works well with CSS transforms and the transformCss() method.

var container = Pablo(demoElement),
    svg = container.svg({width:'100%', height:260}),
    circle = svg.circle({
        r:  50,
        cx: 80,
        cy: 80,
        stroke: 'lightblue',
        'stroke-width': 35,
        fill: 'darkblue',
        cursor: 'pointer'
    });

// Transition the CSS `transform` property, over 1000ms
circle.transition('transform', 600);

container.on('click', function(){
    // Set a new CSS transform
    circle.transformCss('translate', ['350px', '100px']);

    // Change it back after a delay
    window.setTimeout(function(){
        circle.transformCss('translate', [0, 0]);
    }, 400);
});

alert('Click me');

Working with CSS transitions and transforms is usually a spaghetti mess of vendor-prefixing, but Pablo abstracts this away so that prefixed properties may be passed in unprefixed. So, transform can be passed in and Pablo will assign -webkit-transform, -moz-transform or some other variation, according to the browser.

transition(transition)

Transition properties can be passed in an object to represent the transition.

var svg = Pablo(demoElement).svg({width:'100%', height:160}),
    circles = Pablo.circle().duplicate(2).attr({
    r:  50,
    cx: function(el,i){return i * 140 + 80},
    cy: 80,
    stroke: 'lightblue',
    fill: 'darkblue',
    cursor: 'pointer'
}).appendTo(svg);

circles.transition({
    name: 'stroke-width',
    from: 0,
    to: 60,
    dur: 3000,
    timing: 'ease-out',
    end: function(){alert('Done')}
});

The object passed to transition() has similar semantics to the attributes of SVG’s native <animateTransform> element and CSS transitions. Only the name property is required.

name

Required). The name of the CSS property to transition.

from

The value of the CSS property at the start of the transition. If omitted, the transition will start with the current value of the property on the elements.

to

The value of the CSS property at the end of the transition. If omitted, the transition will not start immediately; instead, it will take place whenever css() is used to change the CSS property’s value on the elements.

dur

The duration of the transition. If the value is a number, then its unit will be milliseconds. To specify other units, use a string, e.g. '5s' for 5 seconds.

timing

The timing function to be used for the transition. This can be a named function, like ease-out or a timing matrix.

delay

The delay before the transition starts. As with dur, this can be a number (in milliseconds) or a string with a unit.

end

A callback that fires when each transitioned CSS property completes. The callback is passed a native Transition event object, with information about the transition.

Transitioning transforms

When transition() is passed the property transform, it will run the passed value through transformCss(), allowing complex transforms to be made.

var container = Pablo(demoElement),
    svg = container.svg({width:'100%', height:260}),
    shape = svg.rect({
        width:  50,
        height: 50,
        stroke: 'lightblue',
        'stroke-width': 25,
        fill: 'darkblue',
        cursor: 'pointer'
    });

// Transition the CSS `transform` property, over 1000ms
shape.transition({
    name: 'transform',
    from: {translate: ['300px', '30px']},
    to: [
        {translate: ['60px', '80px']},
        {rotate:'80deg'},
        {skewX: '30deg'}
    ],
    dur: 600,
    timing: 'ease-in-out',
    end: function(){
        shape.transformCss([
            {translate: ['350px', '240px']},
            {rotate: '180deg'},
            {skewX: '180deg'}
        ]);
    }
});

transition(transitions)

Multiple CSS properties can be transitioned at once. Pass in an array of transition objects.

var svg = Pablo(demoElement).svg({width:'100%', height:160}),
    circle = svg.circle({
        r:  50,
        cx: 80,
        cy: 80,
        stroke: 'lightblue',
        fill: 'darkblue'
    });

circle.transition([
    {
        name: 'opacity',
        dur: 2000,
        from: 0,
        to: 1,
        end: function(event){
            alert(event.propertyName + ' done');
        },
        timing: 'ease-in'
    },
    {
        name: 'stroke-width', // or strokeWidth
        dur: 4000,
        from: 0,
        to: 50,
        end: function(event){
            alert(event.propertyName + ' done');
        },
        timing: 'ease-in'
    }
]);

Alternatively, a key-value map of transitions can be given, with each property having an array of transition values. It is not possible to set from, to or end with this syntax.

var svg = Pablo(demoElement).svg({width:'100%', height:160}),
    circle = svg.circle({
        r:  50,
        cx: 80,
        cy: 80,
        stroke: 'lightblue',
        fill: 'darkblue'
    });

circle.transition({
    opacity: [5000, 'ease-in'],
    'stroke-width': [2000, 'ease-in']
});

window.setTimeout(function(){
    circle.css({opacity:0, 'stroke-width':60});
}, 4);

transition(stringValue)

Set one or more transforms as a string, representing the transform attribute’s value.

var svg = Pablo(demoElement).svg({height:175}),
    rect = svg.rect({
        width: 100,
        height: 100
    });

rect.css({fill: 'purple', opacity:0.5})
    .transition('opacity 3000, fill 5000');

window.setTimeout(function(){
    rect.css({fill:'darkblue', opacity:1});
}, 600);

transition(null)

Remove all transforms on the element.

var svg = Pablo(demoElement).svg({height:175}),
    rect = svg.rect({
        width: 100,
        height: 100,
        fill: 'red'
    });

rect.css({fill: 'purple', opacity:0.5})
    .transition('opacity 3000, fill 5000');

rect.transition(null);

window.setTimeout(function(){
    rect.css({fill:'darkblue', opacity:1});
}, 600);

transition(name, null)

Remove the named transform on the element.

var svg = Pablo(demoElement).svg({height:175}),
    rect = svg.rect({
        width: 100,
        height: 100,
        fill: 'red'
    });

rect.css({fill: 'purple', opacity:0.5})
    .transition('opacity 3000, fill 5000');

rect.transition('opacity', null);

window.setTimeout(function(){
    rect.css({fill:'darkblue', opacity:1});
}, 600);
Painting is just another way of keeping a diary.
Pablo Picasso