/**
* @name applyTransition
* @param {Element} node Dom element to apply transition to
* @param {Object} desc An object describing the transition to make
*/
export default function apply_transition(node, desc) {
// If a transition on a given node we need a unique id for each
// transition to know we are handling the correct one.
const transitionId = guid();
const props = desc.props.join(',');
const startClasses = validatedClass(desc.from.class);
const startFrame = normalizedFrame(desc.from.style);
immediate(() => {
applyClasses(node, startClasses);
applyStyles(node, startFrame, true);
setStyle(node, 'transition-property', props);
node.setAttribute('data-transition', transitionId);
// Force a reflow to make sure we're in a good state
reflow(node);
immediate(() => {
const endClasses = validatedClass(desc.to.class);
const endFrame = normalizedFrame(desc.to.style);
setupTransitionEnd(node, endFrame, transitionId);
applyStyles(node, endFrame, true);
applyClasses(node, endClasses);
});
});
}
immediate(() => {
const endClasses = validatedClass(desc.to.class);
const endFrame = normalizedFrame(desc.to.style);
setupTransitionEnd(node, endFrame, transitionId);
applyStyles(node, endFrame, true);
applyClasses(node, endClasses);
});
QUnit.test('correctly handles empty strings', function(assert) {
const className = '';
const actual = validatedClass(className);
const expected = {
add : [],
remove : []
};
assert.deepEqual(actual, expected);
});
QUnit.test('correctly converts string into object', function(assert) {
const className = 'test class here';
const actual = validatedClass(className);
const expected = {
add : ['test', 'class', 'here'],
remove : []
};
assert.deepEqual(actual, expected);
});
QUnit.test('correctly handles extra spaces', function(assert) {
const className = ' test class here ';
const actual = validatedClass(className);
const expected = {
add : ['test', 'class', 'here'],
remove : []
};
assert.deepEqual(actual, expected);
});