mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-12-25 01:20:30 +00:00
Code Issues Releases Wiki Activity

Refactor animation easings

Browse Source
This commit is contained in:
Jermolene 2014-07-08 10:07:17 +01:00
parent 21c137a66c
commit 811df7bbf0
2 changed files with 13 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
core/modules/storyviews/classic.js
View File

@ -12,6 +12,8 @@ Views the story as a linear sequence
/*global $tw: false */ /*global $tw: false */
"use strict"; "use strict";
var easing = "cubic-bezier(0.645, 0.045, 0.355, 1)"; // From http://easings.net/#easeInOutCubic
var ClassicStoryView = function(listWidget) { var ClassicStoryView = function(listWidget) {
this.listWidget = listWidget; this.listWidget = listWidget;
} }
@ -51,8 +53,8 @@ ClassicStoryView.prototype.insert = function(widget) {
$tw.utils.forceLayout(targetElement); $tw.utils.forceLayout(targetElement);
// Transition to the final position // Transition to the final position
$tw.utils.setStyle(targetElement,[ $tw.utils.setStyle(targetElement,[
{transition: "opacity " + duration + "ms ease-in-out, " + {transition: "opacity " + duration + "ms " + easing + ", " +
"margin-bottom " + duration + "ms ease-in-out"}, "margin-bottom " + duration + "ms " + easing},
{marginBottom: currMarginBottom + "px"}, {marginBottom: currMarginBottom + "px"},
{opacity: "1.0"} {opacity: "1.0"}
]); ]);
@ -80,9 +82,9 @@ ClassicStoryView.prototype.remove = function(widget) {
]); ]);
$tw.utils.forceLayout(targetElement); $tw.utils.forceLayout(targetElement);
$tw.utils.setStyle(targetElement,[ $tw.utils.setStyle(targetElement,[
{transition: $tw.utils.roundTripPropertyName("transform") + " " + duration + "ms ease-in-out, " + {transition: $tw.utils.roundTripPropertyName("transform") + " " + duration + "ms " + easing + ", " +
"opacity " + duration + "ms ease-in-out, " + "opacity " + duration + "ms " + easing + ", " +
"margin-bottom " + duration + "ms ease-in-out"}, "margin-bottom " + duration + "ms " + easing},
{transform: "translateX(-" + currWidth + "px)"}, {transform: "translateX(-" + currWidth + "px)"},
{marginBottom: (-currHeight) + "px"}, {marginBottom: (-currHeight) + "px"},
{opacity: "0.0"} {opacity: "0.0"}

10
core/modules/storyviews/zoomin.js
View File

@ -12,6 +12,8 @@ Zooms between individual tiddlers
/*global $tw: false */ /*global $tw: false */
"use strict"; "use strict";
var easing = "cubic-bezier(0.645, 0.045, 0.355, 1)"; // From http://easings.net/#easeInOutCubic
var ZoominListView = function(listWidget) { var ZoominListView = function(listWidget) {
var self = this; var self = this;
this.listWidget = listWidget; this.listWidget = listWidget;
@ -77,7 +79,7 @@ ZoominListView.prototype.navigateTo = function(historyInfo) {
this.currentTiddlerDomNode = targetElement; this.currentTiddlerDomNode = targetElement;
// Transform the target tiddler to its natural size // Transform the target tiddler to its natural size
$tw.utils.setStyle(targetElement,[ $tw.utils.setStyle(targetElement,[
{transition: $tw.utils.roundTripPropertyName("transform") + " " + duration + "ms ease-in, opacity " + duration + "ms ease-in"}, {transition: $tw.utils.roundTripPropertyName("transform") + " " + duration + "ms " + easing + ", opacity " + duration + "ms " + easing},
{opacity: "1.0"}, {opacity: "1.0"},
{transform: "translateX(0px) translateY(0px) scale(1)"}, {transform: "translateX(0px) translateY(0px) scale(1)"},
{zIndex: "500"}, {zIndex: "500"},
@ -88,7 +90,7 @@ ZoominListView.prototype.navigateTo = function(historyInfo) {
x = zoomBounds.left - targetBounds.left - (sourceBounds.left - targetBounds.left) * scale; x = zoomBounds.left - targetBounds.left - (sourceBounds.left - targetBounds.left) * scale;
y = zoomBounds.top - targetBounds.top - (sourceBounds.top - targetBounds.top) * scale; y = zoomBounds.top - targetBounds.top - (sourceBounds.top - targetBounds.top) * scale;
$tw.utils.setStyle(prevCurrentTiddler,[ $tw.utils.setStyle(prevCurrentTiddler,[
{transition: $tw.utils.roundTripPropertyName("transform") + " " + duration + "ms ease-in, opacity " + duration + "ms ease-in"}, {transition: $tw.utils.roundTripPropertyName("transform") + " " + duration + "ms " + easing + ", opacity " + duration + "ms " + easing},
{opacity: "0.0"}, {opacity: "0.0"},
{transformOrigin: "0 0"}, {transformOrigin: "0 0"},
{transform: "translateX(" + x + "px) translateY(" + y + "px) scale(" + scale + ")"}, {transform: "translateX(" + x + "px) translateY(" + y + "px) scale(" + scale + ")"},
@ -151,7 +153,7 @@ ZoominListView.prototype.remove = function(widget) {
{display: "block"}, {display: "block"},
{transformOrigin: "50% 50%"}, {transformOrigin: "50% 50%"},
{transform: "translateX(0px) translateY(0px) scale(10)"}, {transform: "translateX(0px) translateY(0px) scale(10)"},
{transition: $tw.utils.roundTripPropertyName("transform") + " " + duration + "ms ease-in, opacity " + duration + "ms ease-in"}, {transition: $tw.utils.roundTripPropertyName("transform") + " " + duration + "ms " + easing + ", opacity " + duration + "ms " + easing},
{opacity: "0"}, {opacity: "0"},
{zIndex: "500"} {zIndex: "500"}
]); ]);
@ -164,7 +166,7 @@ ZoominListView.prototype.remove = function(widget) {
$tw.utils.setStyle(targetElement,[ $tw.utils.setStyle(targetElement,[
{transformOrigin: "50% 50%"}, {transformOrigin: "50% 50%"},
{transform: "translateX(0px) translateY(0px) scale(0.1)"}, {transform: "translateX(0px) translateY(0px) scale(0.1)"},
{transition: $tw.utils.roundTripPropertyName("transform") + " " + duration + "ms ease-in, opacity " + duration + "ms ease-in"}, {transition: $tw.utils.roundTripPropertyName("transform") + " " + duration + "ms " + easing + ", opacity " + duration + "ms " + easing},
{opacity: "0"}, {opacity: "0"},
{zIndex: "0"} {zIndex: "0"}
]); ]);