ramjet
npm install ramjet
, or download ramjet.js.
<div id='a' style='background-color: red; font-size: 4em; padding: 1em;'>a</div> <div id='b' style='background-color: blue; font-size: 4em; padding: 1em;'>b</div> <script src='ramjet.js'></script> <script> var element1 = document.getElementById('a'), element2 = document.getElementById('b'); // to repeat, run this from the console! ramjet.transform( element1, element2 );</script>
Ramjet makes it look like your DOM elements are capable of transforming into one another. It does this by cloning the elements (and all their children), transforming the second element (the one we're transforming to) so that it completely overlaps with the first, then animating the two elements together until the first element (the one we're transitioning from) has exactly the same position and dimensions as the second element originally did.
It's basically the same technique used in iOS 8 to make it appear as though each app lives inside its icon.
In modern browsers, it uses CSS animations, so everything happens off the main thread. The result is buttery-smooth performance, even on mobile devices.
a
is the DOM node we're transitioning from
b
is the DOM node we're transitioning to
options
can include the following properties:
done
- a function that gets called once the transition completes
duration
- the length of the transition, in milliseconds (default 400)
easing
- a function used to control the animation.
Should take a number between 0 and 1, and return something similar
(though it can return a number outside those bounds, if you're doing
e.g. an elastic easing function). I highly recommend eases by Matt DesLauriers, which is a handy collection of these functions
easingScale
- if defined it will use a different easing function for scaling. It can be used to create cartoonish effects.
useTimer
- by default, ramjet will use CSS animations.
Sometimes (when transitioning to or from SVG elements, or in very old
browsers) it will fall back to timer-based animations (i.e. with requestAnimationFrame
or setTimeout
). If you want to always use timers, make this option true
- but I don't recommend it (it's much more juddery on mobile)
overrideClone
(advanced) - look at the section Advanced options
appendToBody
(advanced) - look at the section Advanced options
Convenience function that sets the opacity of each node to 0 (temporarily disabling any transition that might otherwise interfere).
Opposite of ramjet.hide
.
A handful of easing functions, included for convenience.
Successfully tested in IE9+, Chrome (desktop and Android), Firefox, Safari 6+ and mobile Safari - please raise an issue if your experience differs!
Once you've cloned this repo and installed all the development dependencies (npm install
), you can start a development server by running npm start
and navigating to localhost:4567. Any changes to the source code (in the src
directory) will be immediately reflected, courtesy of gobble.
To build, do npm run build
.
Reliable automated tests of a library like ramjet are all but impossible. Instead npm test
will start the development server and navigate you to localhost:4567/test.html, where you can visually check that the library behaves as expected.
The option overrideClone
(function) overrides the
function used to clone nodes (the default implementation uses a simple
node.cloneNode()). It takes as a parameters the current node and the
depth of this node compared to the original element (it is called
recursively on the node subtree). It can be useful for removing annoying
attributes or children from the cloned node. For example if a node
contains a video element with autoplay, this can be excluded because it
may be heavy to animate and you can heard the audio of it. Examples:
// cloning only the root noderamjet.transform( element1, element2, { overrideClone: function (node, depth){ if (depth == 0){ return node.cloneNode(); // copy only the root node } } });// cloning everything but the id attributeramjet.transform( element1, element2, { overrideClone: function (node, depth){ var clone = node.cloneNode(); clone.removeAttr('id'); } });// not cloning the video elementramjet.transform( element1, element2, { overrideClone: function (node, depth){ if (node.nodeType === 1 && node.tagName === "VIDEO"){ return; } return node.cloneNode(); } });
By default the cloned nodes are appended to the parent to the
original node. Inheriting the positioning and css inherited rules, they
can behave in an unexpected way. For this reason you can use the flag appendToBody
to append these nodes to the body instead. I invite everyone to set
this to true and open an issue if it doesn't work, it may become the
default in one of the next releases.
MIT.
上一篇: ramme
下一篇:volatility
还没有评论,说两句吧!
热门资源
seetafaceJNI
项目介绍 基于中科院seetaface2进行封装的JAVA...
spark-corenlp
This package wraps Stanford CoreNLP annotators ...
Keras-ResNeXt
Keras ResNeXt Implementation of ResNeXt models...
capsnet-with-caps...
CapsNet with capsule-wise convolution Project ...
inferno-boilerplate
This is a very basic boilerplate example for pe...
智能在线
400-630-6780
聆听.建议反馈
E-mail: support@tusaishared.com