get basic intro transition test passing

pull/525/head
Rich-Harris 8 years ago
parent 5638a7631b
commit 5bee31fde6

@ -176,7 +176,7 @@ export default class Block {
} }
if ( this.hasIntroTransitions ) { if ( this.hasIntroTransitions ) {
if ( this.builders.outro.isEmpty() ) { if ( this.builders.intro.isEmpty() ) {
properties.addBlock( `intro: ${this.generator.helper( 'noop' )},` ); properties.addBlock( `intro: ${this.generator.helper( 'noop' )},` );
} else { } else {
properties.addBlock( deindent` properties.addBlock( deindent`

@ -303,22 +303,19 @@ export default function dom ( parsed, source, options ) {
} }
}); });
if ( typeof value === 'function' ) { // exclude transitionManager — special case if ( key === 'transitionManager' ) { // special case
const global = `_svelteTransitionManager`;
builders.main.addBlock(
`var ${generator.alias( 'transitionManager' )} = window.${global} || ( window.${global} = ${code});`
);
} else {
const alias = generator.alias( fn.id.name ); const alias = generator.alias( fn.id.name );
if ( alias !== fn.id.name ) code.overwrite( fn.id.start, fn.id.end, alias ); if ( alias !== fn.id.name ) code.overwrite( fn.id.start, fn.id.end, alias );
builders.main.addBlock( code.toString() ); builders.main.addBlock( code.toString() );
} }
}); });
if ( generator.hasIntroTransitions || generator.hasOutroTransitions ) {
const global = `_svelteTransitionManager`;
const transitionManager = toSource( shared.transitionManager );
builders.main.addBlock(
`var ${generator.alias( 'transitionManager' )} = window.${global} || ( window.${global} = ${transitionManager});`
);
}
} }
return generator.generate( builders.main.toString(), options, { name, format } ); return generator.generate( builders.main.toString(), options, { name, format } );

@ -44,7 +44,7 @@ export function wrapTransition ( node, fn, params, intro, outgroup ) {
return assign( transition, { return assign( transition, {
update: function ( now ) { update: function ( now ) {
const p = now - this.start; var p = now - this.start;
this.t = this.a + this.d * ease( p / this.duration ); this.t = this.a + this.d * ease( p / this.duration );
obj.tick( this.t ); obj.tick( this.t );
}, },
@ -94,7 +94,7 @@ export function wrapTransition ( node, fn, params, intro, outgroup ) {
.join( ', ' ); .join( ', ' );
}, },
update: function ( now ) { update: function ( now ) {
const p = now - this.start; var p = now - this.start;
this.t = this.a + this.d * ease( p / this.duration ); this.t = this.a + this.d * ease( p / this.duration );
}, },
done: function () { done: function () {

@ -90,17 +90,19 @@ describe( 'runtime', () => {
let SvelteComponent; let SvelteComponent;
try {
SvelteComponent = require( `./samples/${dir}/main.html` ).default;
} catch ( err ) {
if ( !config.show ) console.log( addLineNumbers( code ) ); // eslint-disable-line no-console
throw err;
}
let unintendedError = null; let unintendedError = null;
return env() return env()
.then( window => { .then( window => {
global.window = window;
try {
SvelteComponent = require( `./samples/${dir}/main.html` ).default;
} catch ( err ) {
if ( !config.show ) console.log( addLineNumbers( code ) ); // eslint-disable-line no-console
throw err;
}
Object.assign = () => { Object.assign = () => {
throw new Error( 'cannot use Object.assign in generated code, as it is not supported everywhere' ); throw new Error( 'cannot use Object.assign in generated code, as it is not supported everywhere' );
}; };

@ -4,7 +4,7 @@ export default {
let callback; let callback;
window.performance = { now: () => now }; window.performance = { now: () => now };
window.requestAnimationFrame = cb => callback = cb; global.requestAnimationFrame = cb => callback = cb;
component.set({ visible: true }); component.set({ visible: true });
const div = target.querySelector( 'div' ); const div = target.querySelector( 'div' );

@ -0,0 +1,18 @@
{{#if visible}}
<div in:fade>fades in</div>
{{/if}}
<script>
export default {
transitions: {
fade: function ( node, params ) {
return {
duration: 400,
tick: t => {
node.style.opacity = t;
}
};
}
}
};
</script>

@ -1,3 +0,0 @@
{{#if visible}}
<div in:style='{opacity: 0}'>fades in</div>
{{/if}}
Loading…
Cancel
Save