Developed by Prev Wong
~ arrow forwardmaster
refreshGrab the package via npm
npm install --save vue-keyframes
Require the plugin in your project file
import {Keyframes} from 'vue-keyframes';
Install the plugin
Vue.use(Keyframes);
Create a <keyframes> component. In it, every child element will act as a frame. [Every child element must be wrapped in a component/HTML tag]
<keyframes loop="true">
<p duration="500">Hi World</p>
<p duration="1000">How's it going ?</p>
<p duration="500">See ya.</p>
</keyframes>
Hi World
Of course, you can customize a little
Attribute | Value |
---|---|
loop |
If set to true, the keyframes will repeat itself infinitely. See more on Manual looping Default: false |
delay |
Defines a delay time(ms) before animating keyframes.
Default: 0 |
component |
Specifies the component <keyframes> will render as. Both standard HTML elements, and Vue components are accepted.
Default: div |
auto-run |
Defines whether to automatically play keyframes
See more on Custom Trigger Default: true |
on-animate |
Callback function for whenever a frame is being animated.
See more on Callbacks Default: false |
on-end |
Callback function once all frames have been animated.
See more on Callbacks Default: false |
... | Every other attribute will be rendered along with the component as usual |
Attribute | Value |
---|---|
duration |
Defines the length of time(ms) the frame/element should show.
Default: 200 |
freeze |
If set to true, once the frame has animated, it will not be removed.
See more on Freezing Frames Default: false |
There are times when the next frame also contains the contents of the current frame, so instead of copy-pasting the current frame, it's much more convenient to just freeze it.
Think of it as "appending" the current frame, whereby it wont be removed by the next frame.
<keyframes loop="true">
<p duration="500">Hi World</p>
<p freeze="true" duration="1000">How's it going ?</p>
<p duration="500">See ya.</p>
</keyframes>
Hello World
By default, the keyframes will animate when they are rendered onto the page. But of course, this shouldnt always be the case. For example, sometimes you only want to animate the keyframes when the user clicks on a button or perhaps when the user scrolls to a particular section.
To do so, you will need to set auto-run to false.
Every keyframes component contains a stop data. stop is set to true when auto-run is set to false. Hence in order to start/resume the keyframes, you will need to modify the component's stop data.
In VueJS, manipulating a component's data externally can be done using refs.
<keyframes auto-run="false" ref="myKeyframes">
<p duration="500">Hi World</p>
<p freeze="true" duration="1000">How's it going ?</p>
<p duration="500">See ya.</p>
</keyframes>
<a ref="custom_trigger">Click me to animate keyframes</a>
// Your JS project file
...
var app = new Vue({...});
app.$refs.custom_trigger.addEventListener("click", (e) => {
app.$refs.myKeyframes.stop = false;
e.target.parentNode.removeChild(e.target); // remove button
})
In additon to the automatic looping that is simply activated by adding the loop="true", you can also manually call resetFrames() method to loop the sequence.
<keyframes delay="100" ref="myKeyframes">
<p freeze="true" duration="500">Goodmorning</p>
<p freeze="true" duration="1000">I am eating</p>
<p freeze="true" duration="500">I am still eating</p>
</keyframes>
<a ref="repeat">Restart animation</a>
// Your JS project file
...
var app = new Vue({...});
app.$refs.repeat.addEventListener("click", (e) => {
app.$refs.myKeyframes.resetFrames();
})
Goodmorning
Your function should accept these 2 parameters
function animateFn(el, frameNum){
/**
If it's the 3rd frame that is being animated,
add the "animate" class to the keyframes' component
**/
if ( frameNum == 2 ) {
el.classList.add("animate");
} else {
el.classList.remove("animate");
}
}
<keyframes on-animate="animateFn" loop="true">
<p duration="1000">0</p>
<p duration="1000">1</p>
<p duration="1000">2</p>
<p duration="1000">3</p>
<p duration="1000">4</p>
</keyframes>
0
Your function should accept one parameter
function endFn(el){
// Increment after every frames are animated
var b = document.getElementById("text").querySelector("b");
var num = parseInt(b.innerHTML) + 1;
b.innerHTML = num;
}
<keyframes on-end="endFn" loop="true">
<p duration="1000">0</p>
<p duration="1000">1</p>
<p duration="1000">2</p>
<p duration="1000">3</p>
<p duration="1000">4</p>
</keyframes>
<p id="text">Keyframes ran: <b>0</b> times</p>
0
Keyframes ran: 0 times