Skip to content

Simple: Patch node.style.animation to work when undefined  #587

@uglow

Description

@uglow

In https://github.com/sveltejs/svelte/blob/master/src/shared/transitions.js:

export function generateKeyframes ( a, b, delta, duration, ease, fn, node, style ) {
	var id = '__svelte' + ~~( Math.random() * 1e9 ); // TODO make this more robust
	var keyframes = '@keyframes ' + id + '{\n';

	for ( var p = 0; p <= 1; p += 16.666 / duration ) {
		var t = a + delta * ease( p );
		keyframes += ( p * 100 ) + '%{' + fn( t ) + '}\n';
	}

	keyframes += '100% {' + fn( b ) + '}\n}';
	style.textContent += keyframes;

	document.head.appendChild( style );

	node.style.animation = node.style.animation.split( ',' )    // <----- Change this line
		.filter( function ( anim ) {
			// when introing, discard old animations if there are any
			return anim && ( delta < 0 || !/__svelte/.test( anim ) );
		})
		.concat( id + ' ' + duration + 'ms linear 1 forwards' )
		.join( ', ' );
}

In PhantomJS (which is nearing end-of-life, but some of us still need to use it), the node.style.animation = ... line produces an error (see sveltejs/svelte-transitions#2).

When this line is changed to:

	node.style.animation = (node.style.animation || '').split( ',' )

... PhantomJS runs as expected.

I know this is a PhantomJS bug, but PhantomJS is no longer maintained.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions