Transitions #525
first working intro transition, woooo
- Loading branch information
commit 8ccad1f10793470162e5070d081acd3717cb41bf
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,118 @@ | ||
| import { noop } from './utils.js'; | ||
|
|
||
| export function linear ( t ) { | ||
| return t; | ||
| } | ||
|
|
||
| export function wrapTransition ( node, fn, params, isIntro ) { | ||
| var obj = fn( node, params, isIntro ); | ||
|
|
||
| var start = window.performance.now() + ( obj.delay || 0 ); | ||
| var duration = obj.duration || 300; | ||
| var end = start + duration; | ||
| var ease = obj.easing || linear; | ||
|
|
||
| if ( obj.tick ) { | ||
| // JS transition | ||
| if ( isIntro ) obj.tick( 0 ); | ||
|
|
||
| return { | ||
| start: start, | ||
| end: end, | ||
| update: function ( now ) { | ||
| obj.tick( ease( ( now - start ) / duration ) ); | ||
| }, | ||
| done: function () { | ||
| obj.tick( isIntro ? 1 : 0 ); | ||
| }, | ||
| abort: noop | ||
| }; | ||
| } else { | ||
| // CSS transition | ||
| var started = false; | ||
| var inlineStyles = {}; | ||
| var computedStyles = getComputedStyle( node ); | ||
|
|
||
| return { | ||
| start: start, | ||
| end: end, | ||
| init: function () { | ||
| for ( var key in obj.styles ) { | ||
| inlineStyles[ key ] = node.style[ key ]; | ||
| node.style[ key ] = isIntro ? obj.styles[ key ] : computedStyles[ key ]; | ||
| } | ||
| }, | ||
| update: function ( now ) { | ||
| if ( !started ) { | ||
| var keys = Object.keys( obj.styles ); | ||
| div.style.transition = keys.map( function ( key ) { | ||
| return key + ' ' + d; | ||
| }).join( ', ' ); | ||
|
|
||
| // TODO use a keyframe animation for custom easing functions | ||
|
|
||
| for ( var key in obj.styles ) { | ||
| node.style[ key ] = isIntro ? computedStyles[ key ] : obj.styles[ key ]; | ||
| } | ||
|
|
||
| started = true; | ||
| } | ||
| }, | ||
| done: function () { | ||
| // TODO what if one of these styles was dynamic? | ||
| if ( isIntro ) { | ||
| for ( var key in obj.styles ) { | ||
| node.style[ key ] = inlineStyles[ key ]; | ||
| } | ||
| } | ||
| }, | ||
| abort: function () { | ||
| node.style.cssText = getComputedStyle( node ).cssText; | ||
| } | ||
| }; | ||
| } | ||
| } | ||
|
|
||
| export var transitionManager = { | ||
| running: false, | ||
| transitions: [], | ||
|
|
||
| add: function ( transition ) { | ||
| transitionManager.transitions.push( transition ); | ||
|
|
||
| if ( !this.running ) { | ||
| this.running = true; | ||
| this.next(); | ||
| } | ||
| }, | ||
|
|
||
| remove: function ( transitions ) { | ||
| var i = transitions.length; | ||
| while ( i-- ) { | ||
| var index = this.transitions.indexOf( transitions[i] ); | ||
| if ( ~index ) this.transitions.splice( index, 1 ); | ||
| } | ||
| }, | ||
|
|
||
| next: function () { | ||
| transitionManager.running = false; | ||
|
|
||
| var now = window.performance.now(); | ||
| var i = transitionManager.transitions.length; | ||
|
|
||
| while ( i-- ) { | ||
| var transition = transitionManager.transitions[i]; | ||
| if ( now >= transition.end ) { | ||
| transition.done(); | ||
| transitionManager.transitions.splice( i, 1 ); | ||
| } else { | ||
| if ( now > transition.start ) transition.update( now ); | ||
| transitionManager.running = true; | ||
| } | ||
| } | ||
|
|
||
| if ( transitionManager.running ) { | ||
| requestAnimationFrame( transitionManager.next ); | ||
| } | ||
| } | ||
| }; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| export function noop () {} | ||
|
|
||
| export function assign ( target ) { | ||
| for ( var i = 1; i < arguments.length; i += 1 ) { | ||
| var source = arguments[i]; | ||
| for ( var k in source ) target[k] = source[k]; | ||
| } | ||
|
|
||
| 8000 return target; | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| import deindent from './deindent.js'; | ||
|
|
||
| export default function toSource ( thing ) { | ||
| if ( typeof thing === 'function' ) { | ||
| return normaliseIndentation( thing.toString() ); | ||
| } | ||
|
|
||
| if ( Array.isArray( thing ) ) { | ||
| if ( thing.length === 0 ) return '[]'; | ||
| throw new Error( 'TODO' ); // not currently needed | ||
| } | ||
|
|
||
| if ( thing && typeof thing === 'object' ) { | ||
| const keys = Object.keys( thing ); | ||
| if ( keys.length === 0 ) return '{}'; | ||
|
|
||
| const props = keys.map( key => `${key}: ${toSource( thing[ key ] )}` ).join( ',\n' ); | ||
| return deindent` | ||
| { | ||
| ${props} | ||
| } | ||
| `; | ||
| } | ||
|
|
||
| return JSON.stringify( thing ); | ||
| } | ||
|
|
||
| function normaliseIndentation ( str ) { | ||
| const lines = str.split( '\n' ).slice( 1, -1 ); | ||
| let minIndentation = Infinity; | ||
|
|
||
| lines.forEach( line => { | ||
| if ( !/\S/.test( line ) ) return; | ||
| const indentation = /^\t*/.exec( line )[0].length; | ||
| if ( indentation < minIndentation ) minIndentation = indentation; | ||
| }); | ||
|
|
||
| if ( minIndentation !== Infinity && minIndentation !== 1 ) { | ||
| const pattern = new RegExp( `^\\t{${minIndentation - 1}}`, 'gm' ); | ||
| return str.replace( pattern, '' ); | ||
| } | ||
|
|
||
| return str; | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do we want to support older versions of IE? Not sure if there's been a ton of discussion on it, but in this case
performance.now()is only supported in IE10+ https://developer.mozilla.org/en-US/docs/Web/API/Performance/nowThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hmm, good question. I don't have a strong view. I reckon it's probably ok, since it's easily polyfilled, but perhaps we need to think about having a section of the docs that says which polyfills you'll likely need for which version of IE.