Cavemanon/piratepoet
7
Fork 0
forked from MichaelYick/mailpoet
Code Pull Requests Actions Releases 12 Activity

Switch to VelocityJS for view transitions, slow down some transitions

Browse Source
This commit is contained in:
Tautvidas Sipavičius 2016-01-05 15:01:30 +02:00
parent 112fe0cd6e
commit c844488b0b
8 changed files with 82 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/src/box.styl
View File

@ -43,7 +43,7 @@
bottom: 0
background-color: rgba(255, 255, 255, 0.0)
opacity: 0
transition: all 200ms cubic-bezier(0.420, 0.000, 0.580, 1.000) /* ease-in-out */
transition: all 250ms cubic-bezier(0.420, 0.000, 0.580, 1.000) /* ease-in-out */
&:hover
background-color: rgba(255, 255, 255, 0.7)

4
assets/css/src/modal.styl
View File

@ -90,7 +90,7 @@ body.mailpoet_modal_opened
padding: 0
margin: 0
width: 100%
transition: margin 0.3s ease-out
transition: margin 250ms ease-out
.mailpoet_panel_wrapper
background-color: #f1f1f1
@ -200,4 +200,4 @@ body.mailpoet_modal_opened
0%
50%
background-color: #064E6D
100%
100%

4
assets/css/src/newsletter_editor/components/sidebar.styl
View File

@ -31,8 +31,8 @@ $widget-icon-width = 30px
margin-top: 0
.mailpoet_region_content
max-height: 2000px
transition: max-height 300ms ease
max-height: 100%
transition: max-height 350ms ease
padding: 0 20px
margin-top: 12px

36
assets/js/src/newsletter_editor/blocks/base.js
View File

@ -11,8 +11,9 @@ define([
'underscore',
'jquery',
'mailpoet',
'modal'
], function(App, Marionette, SuperModel, _, jQuery, MailPoet, Modal) {
'modal',
'velocity-animate'
], function(App, Marionette, SuperModel, _, jQuery, MailPoet, Modal, Velocity) {
"use strict";
@ -128,24 +129,37 @@ define([
}
},
deleteBlock: function() {
this.transitionOut().done(function() {
this.transitionOut().then(function() {
this.model.destroy();
}.bind(this));
},
transitionIn: function() {
return this._transition('mailpoet_block_transition_in');
return this._transition('slideDown', 'fadeIn', 'easeIn');
},
transitionOut: function() {
return this._transition('mailpoet_block_transition_out');
return this._transition('slideUp', 'fadeOut', 'easeOut');
},
_transition: function(className) {
_transition: function(slideDirection, fadeDirection, easing) {
var promise = jQuery.Deferred();
this.$el.addClass(className);
this.$el.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd animationend', function() {
this.$el.removeClass(className);
promise.resolve();
}.bind(this));
this.$el.velocity(
slideDirection,
{
duration: 250,
easing: easing,
complete: function() {
promise.resolve();
}.bind(this),
}
).velocity(
fadeDirection,
{
duration: 250,
easing: easing,
queue: false, // Do not enqueue, trigger animation in parallel
}
);
return promise;
},
});

32
assets/js/src/newsletter_editor/blocks/container.js
View File

@ -248,20 +248,32 @@ define([
}.bind(this));
},
transitionIn: function() {
return this._transition('mailpoet_block_transition_in');
return this._transition('slideDown', 'fadeIn', 'easeIn');
},
transitionOut: function() {
return this._transition('mailpoet_block_transition_out');
return this._transition('slideUp', 'fadeOut', 'easeOut');
},
_transition: function(className) {
var that = this,
promise = jQuery.Deferred();
_transition: function(slideDirection, fadeDirection, easing) {
var promise = jQuery.Deferred();
this.$el.velocity(
slideDirection,
{
duration: 250,
easing: easing,
complete: function() {
promise.resolve();
}.bind(this),
}
).velocity(
fadeDirection,
{
duration: 250,
easing: easing,
queue: false, // Do not enqueue, trigger animation in parallel
}
);
this.$el.addClass(className);
this.$el.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd animationend', function() {
that.$el.removeClass(className);
promise.resolve();
});
return promise;
},
});

32
assets/js/src/newsletter_editor/blocks/social.js
View File

@ -208,20 +208,32 @@ define([
}.bind(this));
},
transitionIn: function() {
return this._transition('mailpoet_block_transition_in');
return this._transition('slideDown', 'fadeIn', 'easeIn');
},
transitionOut: function() {
return this._transition('mailpoet_block_transition_out');
return this._transition('slideUp', 'fadeOut', 'easeOut');
},
_transition: function(className) {
var that = this,
promise = jQuery.Deferred();
_transition: function(slideDirection, fadeDirection, easing) {
var promise = jQuery.Deferred();
this.$el.velocity(
slideDirection,
{
duration: 250,
easing: easing,
complete: function() {
promise.resolve();
}.bind(this),
}
).velocity(
fadeDirection,
{
duration: 250,
easing: easing,
queue: false, // Do not enqueue, trigger animation in parallel
}
);
this.$el.addClass(className);
this.$el.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd animationend', function() {
that.$el.removeClass(className);
promise.resolve();
});
return promise;
},
});

3
package.json
View File

@ -34,7 +34,8 @@
"select2": "^4.0.0",
"spectrum-colorpicker": "^1.6.2",
"tinymce": "4.1.10",
"underscore": "1.8.3"
"underscore": "1.8.3",
"velocity-animate": "1.2.3"
},
"devDependencies": {
"expose-loader": "latest",

7
webpack.config.js
View File

@ -77,7 +77,11 @@ baseConfig = {
{
include: /html2canvas.js$/,
loader: 'expose-loader?html2canvas',
}
},
{
include: require.resolve('velocity-animate'),
loader: 'imports-loader?jQuery=jquery',
},
]
}
};
@ -123,6 +127,7 @@ config.push(_.extend({}, baseConfig, {
'sticky-kit',
'blob',
'filesaver',
'velocity-animate',
'newsletter_editor/communicationsFix.js',
'newsletter_editor/App',