Fx.Transitions
Fx.Transitions Demo. Click the gray box or Drag the red box.
docs referencesjs code | html code | css code
References to Documentation
- Native/Element.js#$
- Effects/Fx-Styles.js#Fx.Styles
- Element/Element-Dimensions.js#Element.getLeft
- Element/Element-Dimensions.js#Element.getTop
- Element/Element-Event.js#Element.addEvent
- Element/Element-Form.js#Element.getValue
- Native/Element.js#Element.setHTML
- Element/Element-Event.js#Element.fireEvent
- Element/Element-Event.js#Event
- Drag/Drag-Base.js#Drag.Base
var target = $('target'); var fx = new Fx.Styles(target, {duration: 1000, wait: false}); var box = $('box'); target.setStyles({ 'top': box.getTop(), 'left': box.getLeft() }); var selectTransition = $('fxTransition'); var selectEase = $('fxEase'); var durationInput = $('duration'); var result = $('result'); $$(selectEase, selectTransition).addEvent('change', function(){ var transition = selectTransition.getValue(); if (transition == 'linear'){ fx.options.transition = Fx.Transitions.linear; transition = 'Fx.Transitions.linear'; } else { var ease = selectEase.getValue(); fx.options.transition = Fx.Transitions[transition][ease]; transition = 'Fx.Transitions.' + transition + '.' + ease; } result.setHTML(transition); }); selectEase.fireEvent('change'); durationInput.addEvent('blur', function(){ fx.options.duration = parseFloat(durationInput.getValue()); }); box.addEvent('mousedown', function(event){ event = new Event(event); fx.start({ 'top': [event.page.y - 25], 'left': [event.page.x - 25] }); event.stop(); }); new Drag.Base(target, { onComplete: function(){ fx.start(this.s); }, onStart: function(){ this.s = { 'left': this.element.getLeft(), 'top': this.element.getTop() }; } });
<div id="fxNavigation"> <label for="fxTransition">Transition</label>: <select id="fxTransition"> <option value="linear">Linear</option> <option value="Quad">Quadratic</option> <option value="Cubic">Cubic</option> <option value="Quart">Quartic</option> <option value="Quint">Quintic</option> <option value="Sine">Sinusoidal</option> <option value="Expo">Exponential</option> <option value="Circ">Circular</option> <option value="Bounce">Bouncing</option> <option value="Back">Back</option> <option value="Elastic">Elastic</option> </select> <select id="fxEase"> <option value="easeIn">easeIn</option> <option value="easeOut">easeOut</option> <option value="easeInOut">easeInOut</option> </select> <label for="duration">duration</label>: <input type="text" id="duration" value="1000" /> <b id="result"></b> </div> <div id="box"> <div id="target"></div> </div>
#box { height: 500px; width: 100%; background: #ccc; margin-top: 10px; overflow: hidden; } #target { height: 50px; width: 50px; background: #ff3300; position: absolute; }