├── .gitignore
├── LICENSE
├── README.md
├── package.json
└── src
    ├── QueueAnimate.vue
    ├── ScrollAnimate.vue
    ├── index.js
    └── utils.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Animation
 2 | 
 3 | Animation component for Vue Bulma.
 4 | Thanks to [Animate.css](https://daneden.github.io/animate.css/)
 5 | 
 6 | ## Installation
 7 | 
 8 | ```
 9 | $ npm install vue-bulma-animation animate.css --save
10 | ```
11 | 
12 | ## Examples
13 | 
14 | ```vue
15 | <template>
16 |   <article>
17 |     <section style="padding-top: 5rem; height: 70vh;">
18 |       Scroll Down to check the enter animation
19 |     </section>
20 |     <scroll-animate style="padding-top: 10rem; height: 50vh;" 
21 |       transition="fade" 
22 |       :percentage="10"
23 |       :needAnimate="false">
24 |       <queue-animate transition="zoom">
25 |         <h1>This is Queue Animation</h1>
26 |         <div>Hello</div>
27 |         <div>This</div>
28 |         <div>Beautiful</div>
29 |         <div>World</div>
30 |       </queue-animate>
31 |     </scroll-animate>
32 |     <scroll-animate transition="fade" style="padding-top: 10rem; height: 50vh;">
33 |       <h1>This is scroll</h1>
34 |       <div>Hi</div>
35 |     </scroll-animate>
36 |     <section style="height: 100vh;">
37 |       Scroll Up to check the leave animation
38 |     </section>
39 |   </article>
40 | </template>
41 | 
42 | <script>
43 | import { ScrollAnimate, QueueAnimate } from 'vue-bulma-animation'
44 | 
45 | export default {
46 |   components: {
47 |     ScrollAnimate,
48 |     QueueAnimate
49 |   }
50 | }
51 | </script>
52 | ```
53 | 
54 | ## Badges
55 | 
56 | ![](https://img.shields.io/badge/license-MIT-blue.svg)
57 | ![](https://img.shields.io/badge/status-dev-yellow.svg)
58 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-bulma-animation",
 3 |   "version": "1.0.0",
 4 |   "description": "Animation Components for Vue Bulma",
 5 |   "main": "src/index.js",
 6 |   "peerDependencies": {
 7 |     "nimate.css": ">=3.5",
 8 |     "vue": ">=2"
 9 |   },
10 |   "repository": "vue-bulma/animation",
11 |   "keywords": [
12 |     "vue",
13 |     "bulma",
14 |     "vue-bulma",
15 |     "vue-bulma-component",
16 |     "vue-bulma-datepicker",
17 |     "datepicker"
18 |   ],
19 |   "author": "Luventa Pan <luventa@outlook.com>",
20 |   "license": "MIT"
21 | }
22 | 


--------------------------------------------------------------------------------
/src/QueueAnimate.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <slot></slot>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   data () {
10 |     return {
11 |       show: false
12 |     }
13 |   },
14 | 
15 |   props: {
16 |     visible: {
17 |       type: Boolean,
18 |       default: false
19 |     },
20 |     interval: {
21 |       type: Number,
22 |       default: 100
23 |     },
24 |     transition: {
25 |       type: String,
26 |       default: 'fade'
27 |     },
28 |     direction: {
29 |       type: String,
30 |       default: ''
31 |     }
32 |   },
33 | 
34 |   computed: {
35 |     enterClass () {
36 |       return `${this.transition}In${this.direction}`
37 |     },
38 | 
39 |     leaveClass () {
40 |       return `${this.transition}Out${this.direction}`
41 |     },
42 |     animated () {
43 |       return this.visible || this.show
44 |     }
45 |   },
46 | 
47 |   watch: {
48 |     animated (newVal) {
49 |       clearInterval(this.intervalId)
50 |       if (newVal) {
51 |         let idx = 0
52 |         this.intervalId = setInterval(() => {
53 |           if (idx < this.$queueChildren.length) {
54 |             let child = this.$queueChildren[idx]
55 |             child.elm.className = child.elm.className.replace(this.leaveClass, this.enterClass)
56 |             idx++
57 |           } else {
58 |             clearInterval(this.intervalId)
59 |           }
60 |         }, this.interval)
61 |       } else {
62 |         let idx = this.$queueChildren.length - 1
63 |         this.intervalId = setInterval(() => {
64 |           if (idx > -1) {
65 |             let child = this.$queueChildren[idx]
66 |             child.elm.className = child.elm.className.replace(this.enterClass, this.leaveClass)
67 |             idx--
68 |           } else {
69 |             clearInterval(this.intervalId)
70 |           }
71 |         }, this.interval)
72 |       }
73 |     }
74 |   },
75 | 
76 |   mounted () {
77 |     this.$queueChildren = this.$slots.default.filter(c => c.elm && 'className' in c.elm)
78 |     this.$queueChildren.forEach(child => {
79 |       child.elm.className = 'animated ' + this.leaveClass
80 |     })
81 |   }
82 | }
83 | </script>
84 | 


--------------------------------------------------------------------------------
/src/ScrollAnimate.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div :class="[needAnimate ? (visible ? enterClass : leaveClass) : '']">
 3 |     <slot></slot>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import { windowHeight, currentScrollTop } from './utils'
 9 | 
10 | export default {
11 |   data () {
12 |     return {
13 |       elPercent: 0,
14 |       visible: false
15 |     }
16 |   },
17 | 
18 |   props: {
19 |     needAnimate: {
20 |       type: Boolean,
21 |       default: true
22 |     },
23 |     percentage: {
24 |       type: Number,
25 |       default: 25
26 |     },
27 |     transition: {
28 |       type: String,
29 |       default: 'fade'
30 |     },
31 |     direction: {
32 |       type: String,
33 |       default: ''
34 |     }
35 |   },
36 | 
37 |   computed: {
38 |     enterClass () {
39 |       return `animated ${this.transition}In${this.direction}`
40 |     },
41 |     leaveClass () {
42 |       return `animated ${this.transition}Out${this.direction}`
43 |     }
44 |   },
45 | 
46 |   methods: {
47 |     toggleVisibility () {
48 |       let clientBottom = this.$el.clientHeight + this.$el.offsetTop
49 |       let elScroll = clientBottom - currentScrollTop() - windowHeight()
50 |       this.visible = elScroll <= 0 || (elScroll / this.$el.clientHeight >= this.percentage)
51 |       this.$slots.default.forEach(child => {
52 |         if (child && child.componentInstance && 'show' in child.componentInstance) {
53 |           child.componentInstance.show = this.visible
54 |         }
55 |       })
56 |     }
57 |   },
58 | 
59 |   mounted () {
60 |     this.toggleVisibility()
61 |     this.$el._scrollHandler = () => {
62 |       this.toggleVisibility()
63 |     }
64 |     window.addEventListener('scroll', this.$el._scrollHandler)
65 |   },
66 | 
67 |   beforeDestroy () {
68 |     window.removeEventListener('scroll', this.$el._scrollHandler)
69 |   }
70 | }
71 | </script>
72 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import ScrollAnimate from './ScrollAnimate'
2 | import QueueAnimate from './QueueAnimate'
3 | 
4 | export {
5 |   ScrollAnimate,
6 |   QueueAnimate
7 | }
8 | 


--------------------------------------------------------------------------------
/src/utils.js:
--------------------------------------------------------------------------------
1 | export const windowHeight = () => {
2 |   return window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
3 | }
4 | 
5 | export const currentScrollTop = () => {
6 |   return window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop
7 | }
8 | 


--------------------------------------------------------------------------------