mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2025-10-31 07:32:59 +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
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 */
"use strict";
var easing = "cubic-bezier(0.645, 0.045, 0.355, 1)"; // From http://easings.net/#easeInOutCubic
var ClassicStoryView = function(listWidget) {
this.listWidget = listWidget;
}
@@ -51,8 +53,8 @@ ClassicStoryView.prototype.insert = function(widget) {
$tw.utils.forceLayout(targetElement);
// Transition to the final position
$tw.utils.setStyle(targetElement,[
{transition: "opacity " + duration + "ms ease-in-out, " +
"margin-bottom " + duration + "ms ease-in-out"},
{transition: "opacity " + duration + "ms " + easing + ", " +
"margin-bottom " + duration + "ms " + easing},
{marginBottom: currMarginBottom + "px"},
{opacity: "1.0"}
]);
@@ -80,9 +82,9 @@ ClassicStoryView.prototype.remove = function(widget) {
]);
$tw.utils.forceLayout(targetElement);
$tw.utils.setStyle(targetElement,[
{transition: $tw.utils.roundTripPropertyName("transform") + " " + duration + "ms ease-in-out, " +
"opacity " + duration + "ms ease-in-out, " +
"margin-bottom " + duration + "ms ease-in-out"},
{transition: $tw.utils.roundTripPropertyName("transform") + " " + duration + "ms " + easing + ", " +
"opacity " + duration + "ms " + easing + ", " +
"margin-bottom " + duration + "ms " + easing},
{transform: "translateX(-" + currWidth + "px)"},
{marginBottom: (-currHeight) + "px"},
{opacity: "0.0"}

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

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