r_animate

r_animate.js

produce animation with functional programming

---

English | 中文

Notice:

r_animate.js is in its infancy.

Welcome your suggestion to me with issue or email

---

Installation

npm:

npm install --save r_animate 

Browser:

Mainstream browsers such as chrome and firefox already support import natively

<script type="module">
    import { r, act } from "https://unpkg.com/r_animate/index.js";
</script>

how to use r_animate.js in native html and javascript ? 👉 [code][demo]

Document

GET START

API DOC

Example

Example1：Fade in and out

You can check and run the completed App.vue in Playground

or , check the completed App.vue in Github

 r(this.$refs.circle).r_animate(act.FADE_OUT).r_animate(act.FADE_IN);

---

Example2：Zoom

You can check and run the completed App.vue in Playground

or , check the completed App.vue in Github

// App.vue
// ...
// key code
r(this.$refs.circle)
    .r_animate({
        transform: 'scale([1~2])',
        duration: 2000,
    })
    .r_animate({
        transform: 'scale([2~1])',
        duration: 2000,
    });
//...

---

Example3：Drop simulation

You can check and run the completed App.vue in Playground

or , check the completed App.vue in Github