2
Also habe ich an einem leichten Plugin auf CSS-Übergänge gebaut. Es ist in der Lage, Inline-Stile (Übergänge) im laufenden Betrieb hinzuzufügen.Chrome seltsam (scaleY) Übergangsverhalten
Einige Teile des Plugin-Code (wie CSS Attribute prefixing) entfernt Dinge klarer zu machen:
(function($, window, document) {
'use strict';
var plugin = 'transition';
// Constructors
function Transition(element, animation, options) {
this.element = element;
this.animation = animation;
this.direction = null;
this.settings = $.extend({}, $.fn[plugin].defaults, options);
this.init();
}
// Instance
$.extend(Transition.prototype, {
init: function() {
var instance = this;
instance.direction = $(instance.element).is(':visible') ? // toggle
'outward':
'inward' ;
setTimeout(function() { // separate queue entry to make sure previous re-draw events are finished
instance.settings.animations.hasOwnProperty(instance.animation) ?
instance.start():
console.error('Trying to call an undefined animation');
}, 0);
},
/**
* Start the transition.
*/
start: function() {
var instance = this,
$element = $(instance.element);
// Bind handlers
$element
.one('transitionstart', function() {
instance.settings.onStart.call($element);
})
.one('transitionend', function() {
instance.end();
});
// Add inline styles
$element
.css(instance.style('start'))
.show() // ensure the element is visible
.css(instance.style('end'));
},
/**
* End the transition.
*/
end: function() {
var instance = this,
$element = $(instance.element);
instance.direction == 'inward' ?
$element.show():
$element.hide();
instance.settings.onEnd.call($element);
$element.css({
opacity: '',
transform: '',
transformOrigin: '',
transition: ''
}).dequeue();
},
/**
* Get the inline style for the transition.
*
* @param state
*/
style: function(state) {
var instance = this,
animation = instance.settings.animations[instance.animation],
direction = instance.direction,
css = {};
if (state === 'start') {
css = (direction == 'inward') ?
animation.start:
animation.end; // reversed
css['transition'] = 'all ' +
instance.settings.duration + 'ms ' +
instance.settings.curve + ' ' +
instance.settings.delay + 'ms';
} else {
css = (direction == 'inward') ?
animation.end:
animation.start; // reversed
}
return css;
}
});
// Plugin definition
$.fn[plugin] = function(animation, options) {
return this.each(function() {
$(this).queue(function() {
new Transition(this, animation, options);
});
});
};
// Default settings
$.fn[plugin].defaults = {
duration : 500,
delay : 0,
curve : 'ease',
onStart : function() {},
onEnd : function() {}
};
$.fn[plugin].defaults.animations = {
fade: {
start : { 'opacity': 0 },
end : { 'opacity': 1 }
},
scale: {
start : { 'opacity': 0, 'transform': 'scale(0.8)' },
end : { 'opacity': 1, 'transform': 'scale(1.0)' }
},
slide: {
start : { 'opacity': 0, 'transform': 'scaleY(0)', 'transform-origin': 'bottom'},
end : { 'opacity': 1, 'transform': 'scaleY(1)', 'transform-origin': 'bottom'}
}
};
})(jQuery, window, document);
$('#fading').transition('fade', {duration: 1000, delay: 1000});
$('#scaling').transition('scale', {duration: 1000, delay: 1000});
$('#sliding').transition('slide', {duration: 1000, delay: 1000});div {
display: inline-block;
margin-bottom: 1em;
padding: 3em 2em;
background-color: #EEE;
border: 1px solid red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fading">Fading block</div>
<div id="scaling">Scaling block</div>
<div id="sliding">Sliding block</div>Aus irgendeinem Grund die gleitende Animation nicht auf Chrome funktioniert, die Element blendet einfach ein/aus. FireFox und Edge haben dieses Problem nicht.
Die CSS wird für die gleitende Animation angewendet:
slide: {
start : { 'opacity': 0, 'transform': 'scaleY(0)', 'transform-origin': 'bottom'},
end : { 'opacity': 1, 'transform': 'scaleY(1)', 'transform-origin': 'bottom'}
}
Hoffnung jeder Zauberer herausfinden konnte, was los ist.
Du bist der Mann. – JasonK