mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-06-25 23:03:15 +00:00
Code Issues Releases Wiki Activity

Update animations to use a timer instead the transitionEnd event

Browse Source 
Thr trouble is that the transitionEnd event doesn't fire under some
circumstances (eg if the animated element is hidden). So, it's more
reliable to use a timer instead
This commit is contained in:
Jeremy Ruston 2013-07-06 12:57:37 +01:00
parent b51fb9cfa9
commit 594f4ba204
4 changed files with 18 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
core/modules/utils/dom/animations/slide.js
View File

@ -21,8 +21,7 @@ function slideOpen(domNode,options) {
currPaddingTop = parseInt(computedStyle.paddingTop,10),
currHeight = domNode.offsetHeight;
// Reset the margin once the transition is over
var transitionEventName = $tw.utils.convertEventName("transitionEnd");
domNode.addEventListener(transitionEventName,function handler(event) {
setTimeout(function() {
$tw.utils.setStyle(domNode,[
{transition: "none"},
{marginBottom: ""},
@ -32,11 +31,10 @@ function slideOpen(domNode,options) {
{height: "auto"},
{opacity: ""}
]);
domNode.removeEventListener(transitionEventName,handler,false);
if(options.callback) {
options.callback();
}
},false);
},$tw.config.preferences.animationDuration);
// Set up the initial position of the element
$tw.utils.setStyle(domNode,[
{transition: "none"},
@ -68,8 +66,7 @@ function slideOpen(domNode,options) {
function slideClosed(domNode,options) {
var currHeight = domNode.offsetHeight;
// Clear the properties we've set when the animation is over
var transitionEventName = $tw.utils.convertEventName("transitionEnd");
domNode.addEventListener(transitionEventName,function handler(event) {
setTimeout(function() {
$tw.utils.setStyle(domNode,[
{transition: "none"},
{marginBottom: ""},
@ -79,11 +76,10 @@ function slideClosed(domNode,options) {
{height: "auto"},
{opacity: ""}
]);
domNode.removeEventListener(transitionEventName,handler,false);
if(options.callback) {
options.callback();
}
},false);
},$tw.config.preferences.animationDuration);
// Set up the initial position of the element
$tw.utils.setStyle(domNode,[
{height: currHeight + "px"},

12
core/modules/widgets/list/listviews/classic.js
View File

@ -37,14 +37,12 @@ ClassicListView.prototype.insert = function(index) {
currMarginTop = parseInt(window.getComputedStyle(targetElement).marginTop,10),
currHeight = targetElement.offsetHeight + currMarginTop;
// Reset the margin once the transition is over
var transitionEventName = $tw.utils.convertEventName("transitionEnd");
targetElement.addEventListener(transitionEventName,function handler(event) {
setTimeout(function() {
$tw.utils.setStyle(targetElement,[
{transition: "none"},
{marginBottom: ""}
]);
targetElement.removeEventListener(transitionEventName,handler,false);
},false);
},$tw.config.preferences.animationDuration);
// Set up the initial position of the element
$tw.utils.setStyle(targetElement,[
{transition: "none"},
@ -69,12 +67,12 @@ ClassicListView.prototype.remove = function(index) {
currMarginBottom = parseInt(window.getComputedStyle(targetElement).marginBottom,10),
currMarginTop = parseInt(window.getComputedStyle(targetElement).marginTop,10),
currHeight = targetElement.offsetHeight + currMarginTop;
// Attach an event handler for the end of the transition
targetElement.addEventListener($tw.utils.convertEventName("transitionEnd"),function(event) {
// Remove the element at the end of the transition
setTimeout(function() {
if(targetElement.parentNode) {
targetElement.parentNode.removeChild(targetElement);
}
},false);
},$tw.config.preferences.animationDuration);
// Animate the closure
$tw.utils.setStyle(targetElement,[
{transition: "none"},

14
core/modules/widgets/list/listviews/pop.js
View File

@ -20,14 +20,12 @@ PopListView.prototype.insert = function(index) {
var listElementNode = this.listWidget.children[index],
targetElement = listElementNode.domNode;
// Reset once the transition is over
var transitionEventName = $tw.utils.convertEventName("transitionEnd");
targetElement.addEventListener(transitionEventName,function handler(event) {
setTimeout(function() {
$tw.utils.setStyle(targetElement,[
{transition: "none"},
{transform: "none"}
]);
targetElement.removeEventListener(transitionEventName,handler,false);
},false);
},$tw.config.preferences.animationDuration);
// Set up the initial position of the element
$tw.utils.setStyle(targetElement,[
{transition: "none"},
@ -47,14 +45,12 @@ PopListView.prototype.insert = function(index) {
PopListView.prototype.remove = function(index) {
var listElementNode = this.listWidget.children[index],
targetElement = listElementNode.domNode;
// Attach an event handler for the end of the transition
var transitionEventName = $tw.utils.convertEventName("transitionEnd");
targetElement.addEventListener(transitionEventName,function handler(event) {
// Remove the element at the end of the transition
setTimeout(function() {
if(targetElement.parentNode) {
targetElement.parentNode.removeChild(targetElement);
}
targetElement.removeEventListener(transitionEventName,handler,false);
},false);
},$tw.config.preferences.animationDuration);
// Animate the closure
$tw.utils.setStyle(targetElement,[
{transition: "none"},

4
themes/tiddlywiki/snowwhite/base.tid
View File

@ -421,6 +421,10 @@ a.tw-tiddlylink-external {
color: #182955;
}
.title img {
height: 1em;
}
.tw-subtitle {
font-size: 0.9em;
color: #c0c0c0;