Commit 0986fe23 authored by Clement Ho's avatar Clement Ho

Replace animateEmoji timeout with eventListener

parent 83cd3d79
...@@ -26,6 +26,7 @@ v 8.12.0 (unreleased) ...@@ -26,6 +26,7 @@ v 8.12.0 (unreleased)
- API: Expose issue confidentiality flag. (Robert Schilling) - API: Expose issue confidentiality flag. (Robert Schilling)
- Fix markdown anchor icon interaction (ClemMakesApps) - Fix markdown anchor icon interaction (ClemMakesApps)
- Test migration paths from 8.5 until current release !4874 - Test migration paths from 8.5 until current release !4874
- Replace animateEmoji timeout with eventListener (ClemMakesApps)
- Optimistic locking for Issues and Merge Requests (title and description overriding prevention) - Optimistic locking for Issues and Merge Requests (title and description overriding prevention)
- Add `wiki_page_events` to project hook APIs (Ben Boeckel) - Add `wiki_page_events` to project hook APIs (Ben Boeckel)
- Remove Gitorious import - Remove Gitorious import
......
...@@ -255,12 +255,12 @@ ...@@ -255,12 +255,12 @@
}; };
AwardsHandler.prototype.animateEmoji = function($emoji) { AwardsHandler.prototype.animateEmoji = function($emoji) {
var className; var className = 'pulse animated once short';
className = 'pulse animated';
$emoji.addClass(className); $emoji.addClass(className);
return setTimeout((function() {
return $emoji.removeClass(className); $emoji.on('webkitAnimationEnd animationEnd', function() {
}), 321); $(this).removeClass(className);
});
}; };
AwardsHandler.prototype.createEmoji = function(votesBlock, emoji) { AwardsHandler.prototype.createEmoji = function(votesBlock, emoji) {
......
...@@ -8,65 +8,44 @@ ...@@ -8,65 +8,44 @@
// Copyright (c) 2016 Daniel Eden // Copyright (c) 2016 Daniel Eden
.animated { .animated {
-webkit-animation-duration: 1s; @include webkit-prefix(animation-duration, 1s);
animation-duration: 1s; @include webkit-prefix(animation-fill-mode, both);
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.animated.hinge { &.infinite {
-webkit-animation-duration: 2s; @include webkit-prefix(animation-iteration-count, infinite);
animation-duration: 2s; }
}
.animated.flipOutX, &.once {
.animated.flipOutY, @include webkit-prefix(animation-iteration-count, 1);
.animated.bounceIn, }
.animated.bounceOut {
-webkit-animation-duration: .75s;
animation-duration: .75s;
}
@-webkit-keyframes pulse { &.hinge {
from { @include webkit-prefix(animation-duration, 2s);
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
} }
50% { &.flipOutX,
-webkit-transform: scale3d(1.05, 1.05, 1.05); &.flipOutY,
transform: scale3d(1.05, 1.05, 1.05); &.bounceIn,
&.bounceOut {
@include webkit-prefix(animation-duration, .75s);
} }
to { &.short {
-webkit-transform: scale3d(1, 1, 1); @include webkit-prefix(animation-duration, 321ms);
transform: scale3d(1, 1, 1); @include webkit-prefix(animation-fill-mode, none);
} }
} }
@keyframes pulse { @include keyframes(pulse) {
from { from, to {
-webkit-transform: scale3d(1, 1, 1); @include webkit-prefix(transform, scale3d(1, 1, 1));
transform: scale3d(1, 1, 1);
} }
50% { 50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05); @include webkit-prefix(transform, scale3d(1.05, 1.05, 1.05));
transform: scale3d(1.05, 1.05, 1.05);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
} }
} }
.pulse { .pulse {
-webkit-animation-name: pulse; @include webkit-prefix(animation-name, pulse);
animation-name: pulse;
} }
...@@ -85,3 +85,13 @@ ...@@ -85,3 +85,13 @@
#{'-webkit-' + $property}: $value; #{'-webkit-' + $property}: $value;
#{$property}: $value; #{$property}: $value;
} }
@mixin keyframes($animation-name) {
@-webkit-keyframes #{$animation-name} {
@content;
}
@keyframes #{$animation-name} {
@content;
}
}
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment