0.2.3 • Published 5 years ago
vue-scene v0.2.3
Installation
$ npm install vue-scenejs
How to use
<template>
<vue-scene
:keyframes="keyframes"
easing="ease-in-out"
fillMode="forwards"
direction="normal"
:iterationCount="1"
:playSpeed="1"
:time="0"
:css="false"
:autoplay="false"
@play="onPlay"
@paused="onPaused"
@ended="onEnded"
@animate="onAnimate"
@timeupdate="onTimeUpdate"
@iteration="onIteration"
>
<div className="circles">
<div className="circle circle1"></div>
<div className="circle circle2"></div>
<div className="circle circle3"></div>
</div>
</vue-scene>
</template>
<script>
import { VueScene, VueSceneItem } from "vue-scenejs";
export default {
name: "App",
components: {
VueScene,
VueSceneItem,
},
data: function () {
return {
keyframes: {
".circles .circle": i => ({
0: {
"border-width": "150px",
"opacity": 1,
"transform": "translate(-50%, -50%) scale(0)",
},
1.5: {
"border-width": "0px",
"opacity": 0.3,
"transform": "scale(0.7)",
},
options: {
delay: i * 0.4,
},
}),
},
};
},
};
</script>
Props
name | type | default | description |
---|---|---|---|
css | boolean | false | Check to play with CSS |
autoplay | boolean | false | Check to play automatically |
keyframes | object | {} | Specify properties by time. |
...options | Check out the options | ||
...events | Check out Scene's events Check out SceneItem's events |
Development
Compiles and hot-reloads for development
npm run serve
License
MIT License
Copyright (c) 2016 Daybrush