├── .eslintrc.js ├── .firebaserc ├── .github ├── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md └── workflows │ ├── firebase-hosting-merge.yml │ └── firebase-hosting-pull-request.yml ├── .gitignore ├── .nvmrc ├── .vscode ├── extensions.json └── settings.json ├── 404.html ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── dist ├── index.js └── v-animate-css.js ├── firebase.json ├── index.html ├── index.js ├── package.json ├── src ├── directives │ ├── animate.js │ ├── animations.json │ ├── events.js │ └── index.js └── index.js ├── webpack.config.js └── yarn.lock /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | es2021: true, 4 | node: true, 5 | }, 6 | extends: [ 7 | 'standard', 8 | 'semistandard', 9 | 'eslint:recommended', 10 | 'plugin:vue/vue3-essential', 11 | ], 12 | overrides: [], 13 | parserOptions: { 14 | ecmaVersion: 'latest', 15 | sourceType: 'module', 16 | }, 17 | plugins: [ 18 | 'vue', 19 | ], 20 | rules: { 21 | 'generator-star-spacing': 'off', 22 | 'arrow-parens': 'off', 23 | 'one-var': 'off', 24 | semi: [2, 'always'], 25 | 'space-before-function-paren': [2, 'always'], 26 | 'keyword-spacing': [2, { before: true, after: true }], 27 | 'space-before-blocks': [2, 'always'], 28 | 'comma-dangle': [2, 'always-multiline'], 29 | 'no-console': 'off', 30 | 'no-multi-str': 'off', 31 | }, 32 | }; 33 | -------------------------------------------------------------------------------- /.firebaserc: -------------------------------------------------------------------------------- 1 | { 2 | "projects": { 3 | "default": "ossph-org" 4 | }, 5 | "targets": { 6 | "ossph-org": { 7 | "hosting": { 8 | "production": [ 9 | "v-animate-css" 10 | ] 11 | } 12 | } 13 | } 14 | } -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.github/workflows/firebase-hosting-merge.yml: -------------------------------------------------------------------------------- 1 | # This file was auto-generated by the Firebase CLI 2 | # https://github.com/firebase/firebase-tools 3 | 4 | name: Deploy to Firebase Hosting on merge 5 | 'on': 6 | push: 7 | branches: 8 | - main 9 | jobs: 10 | build_and_deploy: 11 | runs-on: ubuntu-latest 12 | steps: 13 | - uses: actions/checkout@v2 14 | - uses: actions/setup-node@v2 15 | with: 16 | node-version: 16 17 | - name: Install Yarn 18 | run: npm install yarn@latest -g 19 | - name: Install Dependencies 20 | run: yarn 21 | - name: Run Build 22 | run: yarn build 23 | - uses: FirebaseExtended/action-hosting-deploy@v0 24 | with: 25 | repoToken: '${{ secrets.GITHUB_TOKEN }}' 26 | firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_OSSPH_ORG }}' 27 | projectId: ossph-org 28 | siteId: v-animate-css 29 | target: production 30 | channelId: live 31 | -------------------------------------------------------------------------------- /.github/workflows/firebase-hosting-pull-request.yml: -------------------------------------------------------------------------------- 1 | # This file was auto-generated by the Firebase CLI 2 | # https://github.com/firebase/firebase-tools 3 | 4 | name: Deploy to Firebase Hosting on PR 5 | on: 6 | pull_request: 7 | branches: 8 | - main 9 | types: 10 | - opened 11 | - reopened 12 | - synchronize 13 | jobs: 14 | build_and_preview: 15 | # if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}' 16 | runs-on: ubuntu-latest 17 | steps: 18 | - uses: actions/checkout@v3 19 | with: 20 | ref: ${{ github.event.pull_request.head.sha }} 21 | - uses: actions/setup-node@v2 22 | with: 23 | node-version: 16 24 | - name: Install Yarn 25 | run: npm install yarn@latest -g 26 | - name: Install Dependencies 27 | run: yarn 28 | - name: Run Build 29 | run: yarn build 30 | - uses: FirebaseExtended/action-hosting-deploy@v0 31 | with: 32 | repoToken: '${{ secrets.GITHUB_TOKEN }}' 33 | firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_OSSPH_ORG }}' 34 | projectId: ossph-org 35 | siteId: v-animate-css 36 | target: production 37 | channelId: pull-requests 38 | expires: 7d 39 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | demo/ 3 | node_modules/ 4 | npm-debug.log 5 | yarn-error.log 6 | 7 | # Editor directories and files 8 | .idea 9 | *.suo 10 | *.ntvs* 11 | *.njsproj 12 | *.sln 13 | .npmignore -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 16 -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "dbaeumer.vscode-eslint", 4 | "editorconfig.editorconfig", 5 | "vue.volar", 6 | "wayou.vscode-todo-highlight" 7 | ], 8 | "unwantedRecommendations": [ 9 | "octref.vetur", 10 | "hookyqr.beautify", 11 | "dbaeumer.jshint", 12 | "ms-vscode.vscode-typescript-tslint-plugin" 13 | ] 14 | } -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.bracketPairColorization.enabled": true, 3 | "editor.guides.bracketPairs": true, 4 | "editor.formatOnSave": false, 5 | "editor.codeActionsOnSave": ["source.fixAll.eslint"], 6 | "eslint.validate": ["javascript", "javascriptreact", "typescript", "vue"], 7 | "[json]": { 8 | "editor.defaultFormatter": "vscode.json-language-features" 9 | }, 10 | "prettier.singleQuote": true 11 | } 12 | -------------------------------------------------------------------------------- /404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Page Not Found 7 | 8 | 23 | 24 | 25 |
26 |

404

27 |

Page Not Found

28 |

The specified file was not found on this website. Please check the URL for mistakes and try again.

29 |

Why am I seeing this?

30 |

This page was generated by the Firebase Command-Line Interface. To modify it, edit the 404.html file in your project's configured public directory.

31 |
32 | 33 | 34 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Citizen Code of Conduct 2 | 3 | ## 1. Purpose 4 | 5 | A primary goal of V Animate Css is to be inclusive to the largest number of contributors, with the most varied and diverse backgrounds possible. As such, we are committed to providing a friendly, safe and welcoming environment for all, regardless of gender, sexual orientation, ability, ethnicity, socioeconomic status, and religion (or lack thereof). 6 | 7 | This code of conduct outlines our expectations for all those who participate in our community, as well as the consequences for unacceptable behavior. 8 | 9 | We invite all those who participate in V Animate Css to help us create safe and positive experiences for everyone. 10 | 11 | ## 2. Open [Source/Culture/Tech] Citizenship 12 | 13 | A supplemental goal of this Code of Conduct is to increase open [source/culture/tech] citizenship by encouraging participants to recognize and strengthen the relationships between our actions and their effects on our community. 14 | 15 | Communities mirror the societies in which they exist and positive action is essential to counteract the many forms of inequality and abuses of power that exist in society. 16 | 17 | If you see someone who is making an extra effort to ensure our community is welcoming, friendly, and encourages all participants to contribute to the fullest extent, we want to know. 18 | 19 | ## 3. Expected Behavior 20 | 21 | The following behaviors are expected and requested of all community members: 22 | 23 | * Participate in an authentic and active way. In doing so, you contribute to the health and longevity of this community. 24 | * Exercise consideration and respect in your speech and actions. 25 | * Attempt collaboration before conflict. 26 | * Refrain from demeaning, discriminatory, or harassing behavior and speech. 27 | * Be mindful of your surroundings and of your fellow participants. Alert community leaders if you notice a dangerous situation, someone in distress, or violations of this Code of Conduct, even if they seem inconsequential. 28 | * Remember that community event venues may be shared with members of the public; please be respectful to all patrons of these locations. 29 | 30 | ## 4. Unacceptable Behavior 31 | 32 | The following behaviors are considered harassment and are unacceptable within our community: 33 | 34 | * Violence, threats of violence or violent language directed against another person. 35 | * Sexist, racist, homophobic, transphobic, ableist or otherwise discriminatory jokes and language. 36 | * Posting or displaying sexually explicit or violent material. 37 | * Posting or threatening to post other people's personally identifying information ("doxing"). 38 | * Personal insults, particularly those related to gender, sexual orientation, race, religion, or disability. 39 | * Inappropriate photography or recording. 40 | * Inappropriate physical contact. You should have someone's consent before touching them. 41 | * Unwelcome sexual attention. This includes, sexualized comments or jokes; inappropriate touching, groping, and unwelcomed sexual advances. 42 | * Deliberate intimidation, stalking or following (online or in person). 43 | * Advocating for, or encouraging, any of the above behavior. 44 | * Sustained disruption of community events, including talks and presentations. 45 | 46 | ## 5. Weapons Policy 47 | 48 | No weapons will be allowed at V Animate Css events, community spaces, or in other spaces covered by the scope of this Code of Conduct. Weapons include but are not limited to guns, explosives (including fireworks), and large knives such as those used for hunting or display, as well as any other item used for the purpose of causing injury or harm to others. Anyone seen in possession of one of these items will be asked to leave immediately, and will only be allowed to return without the weapon. Community members are further expected to comply with all state and local laws on this matter. 49 | 50 | ## 6. Consequences of Unacceptable Behavior 51 | 52 | Unacceptable behavior from any community member, including sponsors and those with decision-making authority, will not be tolerated. 53 | 54 | Anyone asked to stop unacceptable behavior is expected to comply immediately. 55 | 56 | If a community member engages in unacceptable behavior, the community organizers may take any action they deem appropriate, up to and including a temporary ban or permanent expulsion from the community without warning (and without refund in the case of a paid event). 57 | 58 | ## 7. Reporting Guidelines 59 | 60 | If you are subject to or witness unacceptable behavior, or have any other concerns, please notify a community organizer as soon as possible. . 61 | 62 | 63 | 64 | Additionally, community organizers are available to help community members engage with local law enforcement or to otherwise help those experiencing unacceptable behavior feel safe. In the context of in-person events, organizers will also provide escorts as desired by the person experiencing distress. 65 | 66 | ## 8. Addressing Grievances 67 | 68 | If you feel you have been falsely or unfairly accused of violating this Code of Conduct, you should notify OSSPhilippines with a concise description of your grievance. Your grievance will be handled in accordance with our existing governing policies. 69 | 70 | 71 | 72 | ## 9. Scope 73 | 74 | We expect all community participants (contributors, paid or otherwise; sponsors; and other guests) to abide by this Code of Conduct in all community venues--online and in-person--as well as in all one-on-one communications pertaining to community business. 75 | 76 | This code of conduct and its related procedures also applies to unacceptable behavior occurring outside the scope of community activities when such behavior has the potential to adversely affect the safety and well-being of community members. 77 | 78 | ## 10. Contact info 79 | 80 | 81 | 82 | ## 11. License and attribution 83 | 84 | The Citizen Code of Conduct is distributed by [Stumptown Syndicate](http://stumptownsyndicate.org) under a [Creative Commons Attribution-ShareAlike license](http://creativecommons.org/licenses/by-sa/3.0/). 85 | 86 | Portions of text derived from the [Django Code of Conduct](https://www.djangoproject.com/conduct/) and the [Geek Feminism Anti-Harassment Policy](http://geekfeminism.wikia.com/wiki/Conference_anti-harassment/Policy). 87 | 88 | _Revision 2.3. Posted 6 March 2017._ 89 | 90 | _Revision 2.2. Posted 4 February 2016._ 91 | 92 | _Revision 2.1. Posted 23 June 2014._ 93 | 94 | _Revision 2.0, adopted by the [Stumptown Syndicate](http://stumptownsyndicate.org) board on 10 January 2013. Posted 17 March 2013._ 95 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Introduction 2 | 3 | Thank you for considering contributing to our project! We appreciate any and all help. 4 | 5 | # Code of Conduct 6 | 7 | Please familiarize yourself with our Code of Conduct before making any contributions. 8 | 9 | # Issues 10 | 11 | Before submitting a new issue, please check if the problem has already been reported. 12 | 13 | When submitting a new issue, please include as much information as possible, including the steps to reproduce the problem. 14 | 15 | # Pull Requests 16 | 17 | Before submitting a pull request, please make sure that your changes are in line with the project's goals and that you have tested your changes thoroughly. 18 | 19 | Please also make sure that your pull request is up-to-date with the latest version of the project. 20 | 21 | # Coding Standards 22 | 23 | Please follow the project's existing coding style. 24 | 25 | Please also make sure that your code is well-documented. 26 | 27 | # Legal 28 | 29 | By submitting a pull request, you confirm that your contributions are made under the project's open source license and that you have the necessary rights to make those contributions. 30 | 31 | Thanks! 32 | 33 | Thank you again for your interest in contributing to our project! We appreciate your help and look forward to reviewing your contributions. 34 | 35 | Lever Planes to the Rules assume sign vendored for the Project. 36 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Open Source Software PH 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 | # **Vue Animate CSS** 2 | 3 | ![GitHub forks](https://img.shields.io/github/forks/ossphilippines/v-animate-css?style=for-the-badge) ![GitHub Repo stars](https://img.shields.io/github/stars/ossphilippines/v-animate-css?style=for-the-badge) 4 | 5 | ### `v-animate-css` 6 | 7 | Animate.css for Vue.js 3 8 | 9 | If you like this project, please give it a star :star: and consider following the author :octocat: :wink:. 10 | 11 | > Vue 2 version is no longer maintained but [the code is available here](https://github.com/OSSPhilippines/v-animate-css/tree/version/vue-2). You can still contribute if you wish so, and we will publish them for Vue 2. 12 | 13 | ### Installation using **NPM** 14 | 15 | ```shell 16 | npm install @ossph/v-animate-css --save 17 | ``` 18 | 19 | ### OR 20 | 21 | ### Installation using **YARN** 22 | 23 | ```shell 24 | yarn add @ossph/v-animate-css 25 | ``` 26 | 27 | ### Or just **import** this to project without installing 28 | 29 | 30 | ### Using **CDN** 31 | 32 | ```script 33 | https://unpkg.com/@ossph/v-animate-css/dist/v-animate-css.js 34 | ``` 35 | 36 | ## **Getting Started** 37 | 38 | ### **Usage** 39 | 40 | ```javascript 41 | import Vue from 'vue'; 42 | import VAnimateCss from '@ossph/v-animate-css'; 43 | 44 | Vue.use(VAnimateCss); 45 | ``` 46 | 47 | ```html 48 | 49 | 50 | 51 | 54 | ``` 55 | 56 | ### **Injecting Alternative CSS Link (local or CDN)** 57 | 58 | Related to [Issue#33](https://github.com/OSSPhilippines/v-animate-css/issues/33) it make sense to give the user the option to add their own local version of Animate.css instead of relying to the default CDN version of Animate.css within the plugin. 59 | 60 | You can do it using the new animateCSSPath option. 61 | 62 | ```js 63 | import Vue from 'vue'; 64 | import VAnimateCss from '@ossph/v-animate-css'; 65 | 66 | Vue.use(VAnimateCss, { animateCSSPath: './local-animate-css-file.css' }); 67 | 68 | // You can also use this option to inject a newer version of Animate.css 69 | Vue.use(VAnimateCss, { animateCSSPath: 'cdn-link-to-a-newer-animate-css-version' }); 70 | ``` 71 | 72 | Demo and Docs [here](https://ossphilippines.github.io/v-animate-css/). 73 | 74 | Made with :heart: by [Joff Tiquez](https://github.com/jofftiquez) 75 | -------------------------------------------------------------------------------- /dist/index.js: -------------------------------------------------------------------------------- 1 | module.exports = 2 | /******/ (function(modules) { // webpackBootstrap 3 | /******/ // The module cache 4 | /******/ var installedModules = {}; 5 | /******/ 6 | /******/ // The require function 7 | /******/ function __webpack_require__(moduleId) { 8 | /******/ 9 | /******/ // Check if module is in cache 10 | /******/ if(installedModules[moduleId]) { 11 | /******/ return installedModules[moduleId].exports; 12 | /******/ } 13 | /******/ // Create a new module (and put it into the cache) 14 | /******/ var module = installedModules[moduleId] = { 15 | /******/ i: moduleId, 16 | /******/ l: false, 17 | /******/ exports: {} 18 | /******/ }; 19 | /******/ 20 | /******/ // Execute the module function 21 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 22 | /******/ 23 | /******/ // Flag the module as loaded 24 | /******/ module.l = true; 25 | /******/ 26 | /******/ // Return the exports of the module 27 | /******/ return module.exports; 28 | /******/ } 29 | /******/ 30 | /******/ 31 | /******/ // expose the modules object (__webpack_modules__) 32 | /******/ __webpack_require__.m = modules; 33 | /******/ 34 | /******/ // expose the module cache 35 | /******/ __webpack_require__.c = installedModules; 36 | /******/ 37 | /******/ // define getter function for harmony exports 38 | /******/ __webpack_require__.d = function(exports, name, getter) { 39 | /******/ if(!__webpack_require__.o(exports, name)) { 40 | /******/ Object.defineProperty(exports, name, { 41 | /******/ configurable: false, 42 | /******/ enumerable: true, 43 | /******/ get: getter 44 | /******/ }); 45 | /******/ } 46 | /******/ }; 47 | /******/ 48 | /******/ // getDefaultExport function for compatibility with non-harmony modules 49 | /******/ __webpack_require__.n = function(module) { 50 | /******/ var getter = module && module.__esModule ? 51 | /******/ function getDefault() { return module['default']; } : 52 | /******/ function getModuleExports() { return module; }; 53 | /******/ __webpack_require__.d(getter, 'a', getter); 54 | /******/ return getter; 55 | /******/ }; 56 | /******/ 57 | /******/ // Object.prototype.hasOwnProperty.call 58 | /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; 59 | /******/ 60 | /******/ // __webpack_public_path__ 61 | /******/ __webpack_require__.p = ""; 62 | /******/ 63 | /******/ // Load entry module and return exports 64 | /******/ return __webpack_require__(__webpack_require__.s = 0); 65 | /******/ }) 66 | /************************************************************************/ 67 | /******/ ([ 68 | /* 0 */ 69 | /***/ (function(module, exports, __webpack_require__) { 70 | 71 | "use strict"; 72 | 73 | 74 | Object.defineProperty(exports, "__esModule", { 75 | value: true 76 | }); 77 | 78 | var _directives = __webpack_require__(1); 79 | 80 | var _directives2 = _interopRequireDefault(_directives); 81 | 82 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 83 | 84 | var ANIMATE_CSS_CDN_LINK = 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css'; 85 | 86 | var VAnimateCss = { 87 | install: function install(Vue) { 88 | var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; 89 | 90 | var animateCSSPath = options.animateCSSPath; 91 | var link = document.createElement('link'); 92 | link.rel = 'stylesheet'; 93 | link.href = animateCSSPath || ANIMATE_CSS_CDN_LINK; 94 | document.getElementsByTagName('head')[0].appendChild(link); 95 | 96 | (0, _directives2.default)(Vue); 97 | } 98 | }; 99 | 100 | exports.default = VAnimateCss; 101 | 102 | /***/ }), 103 | /* 1 */ 104 | /***/ (function(module, exports, __webpack_require__) { 105 | 106 | "use strict"; 107 | 108 | 109 | Object.defineProperty(exports, "__esModule", { 110 | value: true 111 | }); 112 | 113 | var _animate = __webpack_require__(2); 114 | 115 | var _animate2 = _interopRequireDefault(_animate); 116 | 117 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 118 | 119 | exports.default = function (Vue) { 120 | Vue.directive('animate-css', { 121 | mounted: function mounted() {}, 122 | beforeMount: function beforeMount(el, binding) { 123 | var value = binding.value, 124 | modifiers = binding.modifiers; 125 | 126 | (0, _animate2.default)(el, value, modifiers); 127 | } 128 | }); 129 | }; 130 | 131 | /***/ }), 132 | /* 2 */ 133 | /***/ (function(module, exports, __webpack_require__) { 134 | 135 | "use strict"; 136 | 137 | 138 | Object.defineProperty(exports, "__esModule", { 139 | value: true 140 | }); 141 | 142 | var _events = __webpack_require__(3); 143 | 144 | var _scrollmonitor = __webpack_require__(5); 145 | 146 | var _scrollmonitor2 = _interopRequireDefault(_scrollmonitor); 147 | 148 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 149 | 150 | exports.default = function (el, value, modifiers) { 151 | var click = modifiers.click, 152 | hover = modifiers.hover, 153 | enter = modifiers.enter, 154 | enterFully = modifiers.enterFully, 155 | exit = modifiers.exit, 156 | exitPartially = modifiers.exitPartially; 157 | 158 | 159 | var elementWatcher = enter || enterFully || exit || exitPartially ? _scrollmonitor2.default.create(el) : false; 160 | 161 | if (typeof value === 'string') { 162 | value = { classes: value }; 163 | } 164 | 165 | if (click) { 166 | el.onclick = function () { 167 | (0, _events.animateNow)(el, value, modifiers); 168 | }; 169 | return; 170 | } 171 | 172 | if (hover) { 173 | el.onmouseover = function () { 174 | (0, _events.animateNow)(el, value, modifiers); 175 | }; 176 | return; 177 | } 178 | 179 | if (enter) { 180 | elementWatcher.enterViewport(function () { 181 | (0, _events.animateNow)(el, value, modifiers); 182 | }); 183 | return; 184 | } 185 | 186 | if (enterFully) { 187 | elementWatcher.fullyEnterViewport(function () { 188 | (0, _events.animateNow)(el, value, modifiers); 189 | }); 190 | return; 191 | } 192 | 193 | if (exit) { 194 | elementWatcher.exitViewport(function () { 195 | (0, _events.animateNow)(el, value, modifiers); 196 | }); 197 | return; 198 | } 199 | 200 | if (exitPartially) { 201 | elementWatcher.partiallyExitViewport(function () { 202 | (0, _events.animateNow)(el, value, modifiers); 203 | }); 204 | return; 205 | } 206 | 207 | (0, _events.animateNow)(el, value, modifiers); 208 | }; 209 | 210 | /***/ }), 211 | /* 3 */ 212 | /***/ (function(module, exports, __webpack_require__) { 213 | 214 | "use strict"; 215 | 216 | 217 | Object.defineProperty(exports, "__esModule", { 218 | value: true 219 | }); 220 | exports.animateNow = exports.animationEnd = undefined; 221 | 222 | var _animations = __webpack_require__(4); 223 | 224 | var _animations2 = _interopRequireDefault(_animations); 225 | 226 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 227 | 228 | var animationEnd = exports.animationEnd = function animationEnd(el, value, modifiers) { 229 | if (modifiers.once) return; 230 | el.addEventListener('animationend', function () { 231 | var classes = el.classList; 232 | _animations2.default.forEach(function (item) { 233 | if (classes.contains('animate__' + item)) { 234 | el.classList.remove('animate__' + item); 235 | if (value.removeAfterAnimation) { 236 | el.parentNode.removeChild(el); 237 | } 238 | } 239 | }); 240 | }); 241 | }; 242 | 243 | var animateNow = exports.animateNow = function animateNow(el, value, modifiers) { 244 | var classes = value.classes, 245 | duration = value.duration, 246 | delay = value.delay, 247 | iteration = value.iteration; 248 | 249 | 250 | if (duration) { 251 | el.style['-webkit-animation-duration'] = duration + 'ms'; 252 | el.style['-moz-animation-duration'] = duration + 'ms'; 253 | el.style['-o-animation-duration'] = duration + 'ms'; 254 | el.style['animation-duration'] = duration + 'ms'; 255 | } 256 | 257 | if (delay) { 258 | el.style['-webkit-animation-delay'] = delay + 'ms'; 259 | el.style['-moz-animation-delay'] = delay + 'ms'; 260 | el.style['-o-animation-delay'] = delay + 'ms'; 261 | el.style['animation-delay'] = delay + 'ms'; 262 | } 263 | 264 | if (iteration) { 265 | el.style['-webkit-animation-iteration-count'] = '' + iteration; 266 | el.style['-moz-animation-iteration-count'] = '' + iteration; 267 | el.style['-o-animation-iteration-count'] = '' + iteration; 268 | el.style['animation-iteration-count'] = '' + iteration; 269 | } 270 | 271 | el.classList.add('animate__animated', 'animate__' + classes); 272 | 273 | animationEnd(el, value, modifiers); 274 | }; 275 | 276 | /***/ }), 277 | /* 4 */ 278 | /***/ (function(module, exports) { 279 | 280 | module.exports = ["animated","bounce","backInDown","backInLeft","backInRight","backInUp","backOutDown","backOutLeft","backOutRight","backOutUp","bounceIn","bounceInDown","bounceInLeft","bounceInRight","bounceInUp","bounceOut","bounceOutDown","bounceOutLeft","bounceOutRight","bounceOutUp","flash","fadeIn","fadeInDown","fadeInDownBig","fadeInLeft","fadeInLeftBig","fadeInRight","fadeInRightBig","fadeInUp","fadeInUpBig","fadeInTopLeft","fadeInTopRight","fadeInBottomLeft","fadeInBottomRight","fadeOut","fadeOutDown","fadeOutDownBig","fadeOutLeft","fadeOutLeftBig","fadeOutRight","fadeOutRightBig","fadeOutUp","fadeOutUpBig","fadeOutTopLeft","fadeOutTopRight","fadeOutBottomLeft","fadeOutBottomRight","flipInX","flipInY","flipOutX","flipOutY","headShake","heartBeat","hinge","jello","jackInTheBox","lightSpeedInRight","lightSpeedInLeft","lightSpeedOutRight","lightSpeedOutLeft","pulse","rubberBand","rotateIn","rotateInDownLeft","rotateInDownRight","rotateInUpLeft","rotateInUpRight","rotateOut","rotateOutDownLeft","rotateOutDownRight","rotateOutUpLeft","rotateOutUpRight","rollIn","rollOut","shakeX","shakeY","swing","slideInDown","slideInLeft","slideInRight","slideInUp","slideOutDown","slideOutLeft","slideOutRight","slideOutUp","tada","wobble","zoomIn","zoomInDown","zoomInLeft","zoomInRight","zoomInUp","zoomOut","zoomOutDown","zoomOutLeft","zoomOutRight","zoomOutUp"] 281 | 282 | /***/ }), 283 | /* 5 */ 284 | /***/ (function(module, exports, __webpack_require__) { 285 | 286 | !function(t,e){ true?module.exports=e():"function"==typeof define&&define.amd?define("scrollMonitor",[],e):"object"==typeof exports?exports.scrollMonitor=e():t.scrollMonitor=e()}(this,function(){return function(t){function e(o){if(i[o])return i[o].exports;var s=i[o]={exports:{},id:o,loaded:!1};return t[o].call(s.exports,s,s.exports,e),s.loaded=!0,s.exports}var i={};return e.m=t,e.c=i,e.p="",e(0)}([function(t,e,i){"use strict";var o=i(1),s=o.isInBrowser,n=i(2),r=new n(s?document.body:null);r.setStateFromDOM(null),r.listenToDOM(),s&&(window.scrollMonitor=r),t.exports=r},function(t,e){"use strict";e.VISIBILITYCHANGE="visibilityChange",e.ENTERVIEWPORT="enterViewport",e.FULLYENTERVIEWPORT="fullyEnterViewport",e.EXITVIEWPORT="exitViewport",e.PARTIALLYEXITVIEWPORT="partiallyExitViewport",e.LOCATIONCHANGE="locationChange",e.STATECHANGE="stateChange",e.eventTypes=[e.VISIBILITYCHANGE,e.ENTERVIEWPORT,e.FULLYENTERVIEWPORT,e.EXITVIEWPORT,e.PARTIALLYEXITVIEWPORT,e.LOCATIONCHANGE,e.STATECHANGE],e.isOnServer="undefined"==typeof window,e.isInBrowser=!e.isOnServer,e.defaultOffsets={top:0,bottom:0}},function(t,e,i){"use strict";function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t){return c?0:t===document.body?window.innerHeight||document.documentElement.clientHeight:t.clientHeight}function n(t){return c?0:t===document.body?Math.max(document.body.scrollHeight,document.documentElement.scrollHeight,document.body.offsetHeight,document.documentElement.offsetHeight,document.documentElement.clientHeight):t.scrollHeight}function r(t){return c?0:t===document.body?window.pageYOffset||document.documentElement&&document.documentElement.scrollTop||document.body.scrollTop:t.scrollTop}var h=i(1),c=h.isOnServer,a=h.isInBrowser,l=h.eventTypes,p=i(3),u=!1;if(a)try{var w=Object.defineProperty({},"passive",{get:function(){u=!0}});window.addEventListener("test",null,w)}catch(t){}var d=!!u&&{capture:!1,passive:!0},f=function(){function t(e,i){function h(){if(a.viewportTop=r(e),a.viewportBottom=a.viewportTop+a.viewportHeight,a.documentHeight=n(e),a.documentHeight!==p){for(u=a.watchers.length;u--;)a.watchers[u].recalculateLocation();p=a.documentHeight}}function c(){for(w=a.watchers.length;w--;)a.watchers[w].update();for(w=a.watchers.length;w--;)a.watchers[w].triggerCallbacks()}o(this,t);var a=this;this.item=e,this.watchers=[],this.viewportTop=null,this.viewportBottom=null,this.documentHeight=n(e),this.viewportHeight=s(e),this.DOMListener=function(){t.prototype.DOMListener.apply(a,arguments)},this.eventTypes=l,i&&(this.containerWatcher=i.create(e));var p,u,w;this.update=function(){h(),c()},this.recalculateLocations=function(){this.documentHeight=0,this.update()}}return t.prototype.listenToDOM=function(){a&&(window.addEventListener?(this.item===document.body?window.addEventListener("scroll",this.DOMListener,d):this.item.addEventListener("scroll",this.DOMListener,d),window.addEventListener("resize",this.DOMListener)):(this.item===document.body?window.attachEvent("onscroll",this.DOMListener):this.item.attachEvent("onscroll",this.DOMListener),window.attachEvent("onresize",this.DOMListener)),this.destroy=function(){window.addEventListener?(this.item===document.body?(window.removeEventListener("scroll",this.DOMListener,d),this.containerWatcher.destroy()):this.item.removeEventListener("scroll",this.DOMListener,d),window.removeEventListener("resize",this.DOMListener)):(this.item===document.body?(window.detachEvent("onscroll",this.DOMListener),this.containerWatcher.destroy()):this.item.detachEvent("onscroll",this.DOMListener),window.detachEvent("onresize",this.DOMListener))})},t.prototype.destroy=function(){},t.prototype.DOMListener=function(t){this.setStateFromDOM(t)},t.prototype.setStateFromDOM=function(t){var e=r(this.item),i=s(this.item),o=n(this.item);this.setState(e,i,o,t)},t.prototype.setState=function(t,e,i,o){var s=e!==this.viewportHeight||i!==this.contentHeight;if(this.latestEvent=o,this.viewportTop=t,this.viewportHeight=e,this.viewportBottom=t+e,this.contentHeight=i,s)for(var n=this.watchers.length;n--;)this.watchers[n].recalculateLocation();this.updateAndTriggerWatchers(o)},t.prototype.updateAndTriggerWatchers=function(t){for(var e=this.watchers.length;e--;)this.watchers[e].update();for(e=this.watchers.length;e--;)this.watchers[e].triggerCallbacks(t)},t.prototype.createCustomContainer=function(){return new t},t.prototype.createContainer=function(e){"string"==typeof e?e=document.querySelector(e):e&&e.length>0&&(e=e[0]);var i=new t(e,this);return i.setStateFromDOM(),i.listenToDOM(),i},t.prototype.create=function(t,e){"string"==typeof t?t=document.querySelector(t):t&&t.length>0&&(t=t[0]);var i=new p(this,t,e);return this.watchers.push(i),i},t.prototype.beget=function(t,e){return this.create(t,e)},t}();t.exports=f},function(t,e,i){"use strict";function o(t,e,i){function o(t,e){if(0!==t.length)for(E=t.length;E--;)y=t[E],y.callback.call(s,e,s),y.isOne&&t.splice(E,1)}var s=this;this.watchItem=e,this.container=t,i?i===+i?this.offsets={top:i,bottom:i}:this.offsets={top:i.top||w.top,bottom:i.bottom||w.bottom}:this.offsets=w,this.callbacks={};for(var d=0,f=u.length;d0?this.top=this.bottom=this.watchItem:this.top=this.bottom=this.container.documentHeight-this.watchItem:(this.top=this.watchItem.top,this.bottom=this.watchItem.bottom);this.top-=this.offsets.top,this.bottom+=this.offsets.bottom,this.height=this.bottom-this.top,void 0===t&&void 0===e||this.top===t&&this.bottom===e||o(this.callbacks[l],null)}},this.recalculateLocation(),this.update(),m=this.isInViewport,v=this.isFullyInViewport,b=this.isAboveViewport,I=this.isBelowViewport}var s=i(1),n=s.VISIBILITYCHANGE,r=s.ENTERVIEWPORT,h=s.FULLYENTERVIEWPORT,c=s.EXITVIEWPORT,a=s.PARTIALLYEXITVIEWPORT,l=s.LOCATIONCHANGE,p=s.STATECHANGE,u=s.eventTypes,w=s.defaultOffsets;o.prototype={on:function(t,e,i){switch(!0){case t===n&&!this.isInViewport&&this.isAboveViewport:case t===r&&this.isInViewport:case t===h&&this.isFullyInViewport:case t===c&&this.isAboveViewport&&!this.isInViewport:case t===a&&this.isInViewport&&this.isAboveViewport:if(e.call(this,this.container.latestEvent,this),i)return}if(!this.callbacks[t])throw new Error("Tried to add a scroll monitor listener of type "+t+". Your options are: "+u.join(", "));this.callbacks[t].push({callback:e,isOne:i||!1})},off:function(t,e){if(!this.callbacks[t])throw new Error("Tried to remove a scroll monitor listener of type "+t+". Your options are: "+u.join(", "));for(var i,o=0;i=this.callbacks[t][o];o++)if(i.callback===e){this.callbacks[t].splice(o,1);break}},one:function(t,e){this.on(t,e,!0)},recalculateSize:function(){this.height=this.watchItem.offsetHeight+this.offsets.top+this.offsets.bottom,this.bottom=this.top+this.height},update:function(){this.isAboveViewport=this.topthis.container.viewportBottom,this.isInViewport=this.topthis.container.viewportTop,this.isFullyInViewport=this.top>=this.container.viewportTop&&this.bottom<=this.container.viewportBottom||this.isAboveViewport&&this.isBelowViewport},destroy:function(){var t=this.container.watchers.indexOf(this),e=this;this.container.watchers.splice(t,1);for(var i=0,o=u.length;i 1 && arguments[1] !== undefined ? arguments[1] : {}; 89 | 90 | var animateCSSPath = options.animateCSSPath; 91 | var link = document.createElement('link'); 92 | link.rel = 'stylesheet'; 93 | link.href = animateCSSPath || ANIMATE_CSS_CDN_LINK; 94 | document.getElementsByTagName('head')[0].appendChild(link); 95 | 96 | (0, _directives2.default)(Vue); 97 | } 98 | }; 99 | 100 | exports.default = VAnimateCss; 101 | 102 | /***/ }), 103 | /* 1 */ 104 | /***/ (function(module, exports, __webpack_require__) { 105 | 106 | "use strict"; 107 | 108 | 109 | Object.defineProperty(exports, "__esModule", { 110 | value: true 111 | }); 112 | 113 | var _animate = __webpack_require__(2); 114 | 115 | var _animate2 = _interopRequireDefault(_animate); 116 | 117 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 118 | 119 | exports.default = function (Vue) { 120 | Vue.directive('animate-css', { 121 | mounted: function mounted() {}, 122 | beforeMount: function beforeMount(el, binding) { 123 | var value = binding.value, 124 | modifiers = binding.modifiers; 125 | 126 | (0, _animate2.default)(el, value, modifiers); 127 | } 128 | }); 129 | }; 130 | 131 | /***/ }), 132 | /* 2 */ 133 | /***/ (function(module, exports, __webpack_require__) { 134 | 135 | "use strict"; 136 | 137 | 138 | Object.defineProperty(exports, "__esModule", { 139 | value: true 140 | }); 141 | 142 | var _events = __webpack_require__(3); 143 | 144 | var _scrollmonitor = __webpack_require__(5); 145 | 146 | var _scrollmonitor2 = _interopRequireDefault(_scrollmonitor); 147 | 148 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 149 | 150 | exports.default = function (el, value, modifiers) { 151 | var click = modifiers.click, 152 | hover = modifiers.hover, 153 | enter = modifiers.enter, 154 | enterFully = modifiers.enterFully, 155 | exit = modifiers.exit, 156 | exitPartially = modifiers.exitPartially; 157 | 158 | 159 | var elementWatcher = enter || enterFully || exit || exitPartially ? _scrollmonitor2.default.create(el) : false; 160 | 161 | if (typeof value === 'string') { 162 | value = { classes: value }; 163 | } 164 | 165 | if (click) { 166 | el.onclick = function () { 167 | (0, _events.animateNow)(el, value, modifiers); 168 | }; 169 | return; 170 | } 171 | 172 | if (hover) { 173 | el.onmouseover = function () { 174 | (0, _events.animateNow)(el, value, modifiers); 175 | }; 176 | return; 177 | } 178 | 179 | if (enter) { 180 | elementWatcher.enterViewport(function () { 181 | (0, _events.animateNow)(el, value, modifiers); 182 | }); 183 | return; 184 | } 185 | 186 | if (enterFully) { 187 | elementWatcher.fullyEnterViewport(function () { 188 | (0, _events.animateNow)(el, value, modifiers); 189 | }); 190 | return; 191 | } 192 | 193 | if (exit) { 194 | elementWatcher.exitViewport(function () { 195 | (0, _events.animateNow)(el, value, modifiers); 196 | }); 197 | return; 198 | } 199 | 200 | if (exitPartially) { 201 | elementWatcher.partiallyExitViewport(function () { 202 | (0, _events.animateNow)(el, value, modifiers); 203 | }); 204 | return; 205 | } 206 | 207 | (0, _events.animateNow)(el, value, modifiers); 208 | }; 209 | 210 | /***/ }), 211 | /* 3 */ 212 | /***/ (function(module, exports, __webpack_require__) { 213 | 214 | "use strict"; 215 | 216 | 217 | Object.defineProperty(exports, "__esModule", { 218 | value: true 219 | }); 220 | exports.animateNow = exports.animationEnd = undefined; 221 | 222 | var _animations = __webpack_require__(4); 223 | 224 | var _animations2 = _interopRequireDefault(_animations); 225 | 226 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 227 | 228 | var animationEnd = exports.animationEnd = function animationEnd(el, value, modifiers) { 229 | if (modifiers.once) return; 230 | el.addEventListener('animationend', function () { 231 | var classes = el.classList; 232 | _animations2.default.forEach(function (item) { 233 | if (classes.contains('animate__' + item)) { 234 | el.classList.remove('animate__' + item); 235 | if (value.removeAfterAnimation) { 236 | el.parentNode.removeChild(el); 237 | } 238 | } 239 | }); 240 | }); 241 | }; 242 | 243 | var animateNow = exports.animateNow = function animateNow(el, value, modifiers) { 244 | var classes = value.classes, 245 | duration = value.duration, 246 | delay = value.delay, 247 | iteration = value.iteration; 248 | 249 | 250 | if (duration) { 251 | el.style['-webkit-animation-duration'] = duration + 'ms'; 252 | el.style['-moz-animation-duration'] = duration + 'ms'; 253 | el.style['-o-animation-duration'] = duration + 'ms'; 254 | el.style['animation-duration'] = duration + 'ms'; 255 | } 256 | 257 | if (delay) { 258 | el.style['-webkit-animation-delay'] = delay + 'ms'; 259 | el.style['-moz-animation-delay'] = delay + 'ms'; 260 | el.style['-o-animation-delay'] = delay + 'ms'; 261 | el.style['animation-delay'] = delay + 'ms'; 262 | } 263 | 264 | if (iteration) { 265 | el.style['-webkit-animation-iteration-count'] = '' + iteration; 266 | el.style['-moz-animation-iteration-count'] = '' + iteration; 267 | el.style['-o-animation-iteration-count'] = '' + iteration; 268 | el.style['animation-iteration-count'] = '' + iteration; 269 | } 270 | 271 | el.classList.add('animate__animated', 'animate__' + classes); 272 | 273 | animationEnd(el, value, modifiers); 274 | }; 275 | 276 | /***/ }), 277 | /* 4 */ 278 | /***/ (function(module, exports) { 279 | 280 | module.exports = ["animated","bounce","backInDown","backInLeft","backInRight","backInUp","backOutDown","backOutLeft","backOutRight","backOutUp","bounceIn","bounceInDown","bounceInLeft","bounceInRight","bounceInUp","bounceOut","bounceOutDown","bounceOutLeft","bounceOutRight","bounceOutUp","flash","fadeIn","fadeInDown","fadeInDownBig","fadeInLeft","fadeInLeftBig","fadeInRight","fadeInRightBig","fadeInUp","fadeInUpBig","fadeInTopLeft","fadeInTopRight","fadeInBottomLeft","fadeInBottomRight","fadeOut","fadeOutDown","fadeOutDownBig","fadeOutLeft","fadeOutLeftBig","fadeOutRight","fadeOutRightBig","fadeOutUp","fadeOutUpBig","fadeOutTopLeft","fadeOutTopRight","fadeOutBottomLeft","fadeOutBottomRight","flipInX","flipInY","flipOutX","flipOutY","headShake","heartBeat","hinge","jello","jackInTheBox","lightSpeedInRight","lightSpeedInLeft","lightSpeedOutRight","lightSpeedOutLeft","pulse","rubberBand","rotateIn","rotateInDownLeft","rotateInDownRight","rotateInUpLeft","rotateInUpRight","rotateOut","rotateOutDownLeft","rotateOutDownRight","rotateOutUpLeft","rotateOutUpRight","rollIn","rollOut","shakeX","shakeY","swing","slideInDown","slideInLeft","slideInRight","slideInUp","slideOutDown","slideOutLeft","slideOutRight","slideOutUp","tada","wobble","zoomIn","zoomInDown","zoomInLeft","zoomInRight","zoomInUp","zoomOut","zoomOutDown","zoomOutLeft","zoomOutRight","zoomOutUp"] 281 | 282 | /***/ }), 283 | /* 5 */ 284 | /***/ (function(module, exports, __webpack_require__) { 285 | 286 | !function(t,e){ true?module.exports=e():"function"==typeof define&&define.amd?define("scrollMonitor",[],e):"object"==typeof exports?exports.scrollMonitor=e():t.scrollMonitor=e()}(this,function(){return function(t){function e(o){if(i[o])return i[o].exports;var s=i[o]={exports:{},id:o,loaded:!1};return t[o].call(s.exports,s,s.exports,e),s.loaded=!0,s.exports}var i={};return e.m=t,e.c=i,e.p="",e(0)}([function(t,e,i){"use strict";var o=i(1),s=o.isInBrowser,n=i(2),r=new n(s?document.body:null);r.setStateFromDOM(null),r.listenToDOM(),s&&(window.scrollMonitor=r),t.exports=r},function(t,e){"use strict";e.VISIBILITYCHANGE="visibilityChange",e.ENTERVIEWPORT="enterViewport",e.FULLYENTERVIEWPORT="fullyEnterViewport",e.EXITVIEWPORT="exitViewport",e.PARTIALLYEXITVIEWPORT="partiallyExitViewport",e.LOCATIONCHANGE="locationChange",e.STATECHANGE="stateChange",e.eventTypes=[e.VISIBILITYCHANGE,e.ENTERVIEWPORT,e.FULLYENTERVIEWPORT,e.EXITVIEWPORT,e.PARTIALLYEXITVIEWPORT,e.LOCATIONCHANGE,e.STATECHANGE],e.isOnServer="undefined"==typeof window,e.isInBrowser=!e.isOnServer,e.defaultOffsets={top:0,bottom:0}},function(t,e,i){"use strict";function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t){return c?0:t===document.body?window.innerHeight||document.documentElement.clientHeight:t.clientHeight}function n(t){return c?0:t===document.body?Math.max(document.body.scrollHeight,document.documentElement.scrollHeight,document.body.offsetHeight,document.documentElement.offsetHeight,document.documentElement.clientHeight):t.scrollHeight}function r(t){return c?0:t===document.body?window.pageYOffset||document.documentElement&&document.documentElement.scrollTop||document.body.scrollTop:t.scrollTop}var h=i(1),c=h.isOnServer,a=h.isInBrowser,l=h.eventTypes,p=i(3),u=!1;if(a)try{var w=Object.defineProperty({},"passive",{get:function(){u=!0}});window.addEventListener("test",null,w)}catch(t){}var d=!!u&&{capture:!1,passive:!0},f=function(){function t(e,i){function h(){if(a.viewportTop=r(e),a.viewportBottom=a.viewportTop+a.viewportHeight,a.documentHeight=n(e),a.documentHeight!==p){for(u=a.watchers.length;u--;)a.watchers[u].recalculateLocation();p=a.documentHeight}}function c(){for(w=a.watchers.length;w--;)a.watchers[w].update();for(w=a.watchers.length;w--;)a.watchers[w].triggerCallbacks()}o(this,t);var a=this;this.item=e,this.watchers=[],this.viewportTop=null,this.viewportBottom=null,this.documentHeight=n(e),this.viewportHeight=s(e),this.DOMListener=function(){t.prototype.DOMListener.apply(a,arguments)},this.eventTypes=l,i&&(this.containerWatcher=i.create(e));var p,u,w;this.update=function(){h(),c()},this.recalculateLocations=function(){this.documentHeight=0,this.update()}}return t.prototype.listenToDOM=function(){a&&(window.addEventListener?(this.item===document.body?window.addEventListener("scroll",this.DOMListener,d):this.item.addEventListener("scroll",this.DOMListener,d),window.addEventListener("resize",this.DOMListener)):(this.item===document.body?window.attachEvent("onscroll",this.DOMListener):this.item.attachEvent("onscroll",this.DOMListener),window.attachEvent("onresize",this.DOMListener)),this.destroy=function(){window.addEventListener?(this.item===document.body?(window.removeEventListener("scroll",this.DOMListener,d),this.containerWatcher.destroy()):this.item.removeEventListener("scroll",this.DOMListener,d),window.removeEventListener("resize",this.DOMListener)):(this.item===document.body?(window.detachEvent("onscroll",this.DOMListener),this.containerWatcher.destroy()):this.item.detachEvent("onscroll",this.DOMListener),window.detachEvent("onresize",this.DOMListener))})},t.prototype.destroy=function(){},t.prototype.DOMListener=function(t){this.setStateFromDOM(t)},t.prototype.setStateFromDOM=function(t){var e=r(this.item),i=s(this.item),o=n(this.item);this.setState(e,i,o,t)},t.prototype.setState=function(t,e,i,o){var s=e!==this.viewportHeight||i!==this.contentHeight;if(this.latestEvent=o,this.viewportTop=t,this.viewportHeight=e,this.viewportBottom=t+e,this.contentHeight=i,s)for(var n=this.watchers.length;n--;)this.watchers[n].recalculateLocation();this.updateAndTriggerWatchers(o)},t.prototype.updateAndTriggerWatchers=function(t){for(var e=this.watchers.length;e--;)this.watchers[e].update();for(e=this.watchers.length;e--;)this.watchers[e].triggerCallbacks(t)},t.prototype.createCustomContainer=function(){return new t},t.prototype.createContainer=function(e){"string"==typeof e?e=document.querySelector(e):e&&e.length>0&&(e=e[0]);var i=new t(e,this);return i.setStateFromDOM(),i.listenToDOM(),i},t.prototype.create=function(t,e){"string"==typeof t?t=document.querySelector(t):t&&t.length>0&&(t=t[0]);var i=new p(this,t,e);return this.watchers.push(i),i},t.prototype.beget=function(t,e){return this.create(t,e)},t}();t.exports=f},function(t,e,i){"use strict";function o(t,e,i){function o(t,e){if(0!==t.length)for(E=t.length;E--;)y=t[E],y.callback.call(s,e,s),y.isOne&&t.splice(E,1)}var s=this;this.watchItem=e,this.container=t,i?i===+i?this.offsets={top:i,bottom:i}:this.offsets={top:i.top||w.top,bottom:i.bottom||w.bottom}:this.offsets=w,this.callbacks={};for(var d=0,f=u.length;d0?this.top=this.bottom=this.watchItem:this.top=this.bottom=this.container.documentHeight-this.watchItem:(this.top=this.watchItem.top,this.bottom=this.watchItem.bottom);this.top-=this.offsets.top,this.bottom+=this.offsets.bottom,this.height=this.bottom-this.top,void 0===t&&void 0===e||this.top===t&&this.bottom===e||o(this.callbacks[l],null)}},this.recalculateLocation(),this.update(),m=this.isInViewport,v=this.isFullyInViewport,b=this.isAboveViewport,I=this.isBelowViewport}var s=i(1),n=s.VISIBILITYCHANGE,r=s.ENTERVIEWPORT,h=s.FULLYENTERVIEWPORT,c=s.EXITVIEWPORT,a=s.PARTIALLYEXITVIEWPORT,l=s.LOCATIONCHANGE,p=s.STATECHANGE,u=s.eventTypes,w=s.defaultOffsets;o.prototype={on:function(t,e,i){switch(!0){case t===n&&!this.isInViewport&&this.isAboveViewport:case t===r&&this.isInViewport:case t===h&&this.isFullyInViewport:case t===c&&this.isAboveViewport&&!this.isInViewport:case t===a&&this.isInViewport&&this.isAboveViewport:if(e.call(this,this.container.latestEvent,this),i)return}if(!this.callbacks[t])throw new Error("Tried to add a scroll monitor listener of type "+t+". Your options are: "+u.join(", "));this.callbacks[t].push({callback:e,isOne:i||!1})},off:function(t,e){if(!this.callbacks[t])throw new Error("Tried to remove a scroll monitor listener of type "+t+". Your options are: "+u.join(", "));for(var i,o=0;i=this.callbacks[t][o];o++)if(i.callback===e){this.callbacks[t].splice(o,1);break}},one:function(t,e){this.on(t,e,!0)},recalculateSize:function(){this.height=this.watchItem.offsetHeight+this.offsets.top+this.offsets.bottom,this.bottom=this.top+this.height},update:function(){this.isAboveViewport=this.topthis.container.viewportBottom,this.isInViewport=this.topthis.container.viewportTop,this.isFullyInViewport=this.top>=this.container.viewportTop&&this.bottom<=this.container.viewportBottom||this.isAboveViewport&&this.isBelowViewport},destroy:function(){var t=this.container.watchers.indexOf(this),e=this;this.container.watchers.splice(t,1);for(var i=0,o=u.length;i 2 | 3 | 4 | 5 | Vue Animate Css 6 | 7 | 8 | 9 | 10 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 139 | 140 | 141 | 142 | 143 | 145 | 146 |
147 |
148 |
149 |
150 |
151 |
152 |

153 | Vue Animate CSS 154 |

155 |

156 | (v-animate-css) 157 |

158 |

159 | The easiest to implement 160 | Vue directive for 161 | Animate.css 162 |

163 |

164 | Star on 165 | GitHub 166 |

167 |

Installation

168 |
169 |
NPM
170 | npm install v-animate-css --save 171 |

172 |
Yarn
173 | yarn add v-animate-css 174 |

175 |
CDN
176 | https://unpkg.com/v-animate-css/dist/v-animate-css.js 177 |

178 |

Usage

179 |
180 | 
181 | import { createApp } from 'vue';
182 | import VAnimateCss from 'v-animate-css';
183 | 
184 | const app = createApp({})
185 | 
186 | app.use(VAnimateCss);
187 | app.mount("#app")
188 |
189 |
190 |
191 | OR 192 |
193 |
194 | 
195 | <script src="https://unpkg.com/vue@3/dist/vue.global.js"><script>
196 | <script src="https://unpkg.com/v-animate-css/dist/v-animate-css.js"><script>
197 | 
198 | <script>
199 |     const { createApp } = Vue
200 |     const app = createApp({...});
201 |     app.use(VAnimateCss.default);
202 |     app.mount("#app");
203 | </script>
204 |
205 |

Inject Local CSS

206 |
207 |

208 | Related to 209 | Issue#33 210 | it make sense to give the user the option to add their own local 211 | version of Animate.css instead of relying to the default CDN 212 | version of Animate.css within the plugin. 213 |

214 |

215 | You can do it using the new animateCSSPath option. 216 |

217 | 
218 | import { createApp } from 'vue';
219 | import VAnimateCss from 'v-animate-css';
220 | 
221 | const app = createApp({...})
222 | 
223 | app.use(VAnimateCss, { animateCSSPath: './local-animate-css-file.css' });
224 | 
225 | // You can also use this option to inject a newer version of Animate.css
226 | 
227 | app.use(VAnimateCss, { animateCSSPath: 'cdn-link-to-a-newer-animate-css-version' });
228 | 
229 | app.mount("#app")
230 |
231 |

Demo

232 |
233 | Simple
234 |

Start the animation on page load.

235 | Directive
236 | v-animate-css="'fadeIn'" 237 |

238 | Output
239 |
240 | This is a div and nothing but a div 241 |
242 | Refresh the page to see the animation. 243 |
244 | Click
245 |

Start the animation on click event.

246 | Directive
247 | v-animate-css.click="'tada'" 248 |

249 | Output
250 | 253 |
254 | Hover
255 |

Start the animation onmouseover to the element.

256 | Directive
257 | v-animate-css.hover="'rotateIn'" 258 |

259 | Output
260 | 262 |
263 | Object
264 |

265 | Start the animation on click event, with 266 | 500ms delay and 100ms animation 267 | duration. 268 |

269 | Directive
270 | v-animate-css.click="animationObject"

271 | Data
272 | 
273 | animationObject: {
274 |   classes: 'tada',
275 |   delay: 500,
276 |   duration: 1000
277 | }
278 |
279 | Output
280 | 283 |
284 | Infinite
285 |

286 | Start the animation on page load, with 287 | 5000ms animation duration and 288 | infinite iteration. 289 |

290 | Directive
291 | v-animate-css.click="animationInfinite"

292 | Data
293 | 
294 | animationInfinite: {
295 |   classes: 'fadeIn',
296 |   duration: 5000,
297 |   iteration: 'infinite'
298 | }
299 |
300 | Output
301 | 303 |

304 |

API

305 |
306 |
Modifiers
307 |
308 |

309 | This directive has 3 main modifiers click, 310 | hover and once. 311 |

312 | 313 | 314 | 315 | 316 | 317 | 318 | 319 | 320 | 321 | 324 | 328 | 329 | 330 | 333 | 337 | 338 | 339 | 342 | 346 | 347 | 348 |
ModifierDescription
322 | click 323 | 325 | This tells the directive to start the animation upon 326 | clicking the component. E.g. Button. 327 |
331 | hover 332 | 334 | This tells the directive to start the animation upon 335 | onmouseover event. 336 |
340 | once 341 | 343 | When once modifier is used, the directive will 344 | do the animation only once. 345 |
349 |

350 |
Animation using object
351 |
352 |

353 | Aside from plain usage v-animate-css="'animation'", 354 | this directive can also accept an object, with different options. 355 |

356 | 
357 | {
358 |   classes: 'bounce',
359 |   delay: 1000,
360 |   duration: 1000,
361 |   iteration: 5, // the animation will repeat 5 times.
362 | }
363 |
364 | 365 | 366 | 367 | 368 | 369 | 370 | 371 | 372 | 373 | 374 | 377 | 378 | 379 | 380 | 381 | 384 | 388 | 389 | 390 | 391 | 394 | 397 | 398 | 399 | 400 | 403 | 408 | 409 | 410 | 411 |
OptionDescriptionRequired?
375 | classes 376 | The type of animation to be used.YES
382 | delay 383 | 385 | The amount of delay time before the animation starts, in 386 | millis. 387 | OPTIONAL
392 | duration 393 | 395 | The amount of time should the animation last, in millis. 396 | OPTIONAL
401 | iteration 402 | 404 | The number of times the animation will be repeated. Any 405 | whole number or infinite for infinite 406 | iteration. 407 | OPTIONAL
412 |

413 |
Available Animations
414 |
415 | Animation 416 | (Click the items to try the animations) 417 |
418 | 423 |
424 |

425 |
426 | Made with 427 | favorite 428 | by 429 | Joff Tiquez 430 | and 431 | OSSPH 432 |
433 |
434 |
435 |
436 |
437 | 438 | 577 | 578 | 579 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import VAnimateCss from './dist'; 2 | 3 | export default VAnimateCss; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@ossph/v-animate-css", 3 | "version": "2.0.0", 4 | "description": "Animate CSS for Vue.js 3", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "build": "rm -rf dist && webpack --progress --hide-modules", 9 | "build:win": "del /f dist && webpack --progress --hide-modules", 10 | "lint": "eslint --fix ./src" 11 | }, 12 | "publishConfig": { 13 | "access": "public" 14 | }, 15 | "dependencies": { 16 | "scrollmonitor": "^1.2.4" 17 | }, 18 | "devDependencies": { 19 | "babel-core": "^6.25.0", 20 | "babel-loader": "^7.1.1", 21 | "babel-preset-env": "^1.6.0", 22 | "babel-preset-es2015": "^6.24.1", 23 | "eslint": "^8.0.1", 24 | "eslint-config-semistandard": "^17.0.0", 25 | "eslint-config-standard": "^17.0.0", 26 | "eslint-plugin-import": "^2.25.2", 27 | "eslint-plugin-n": "^15.0.0", 28 | "eslint-plugin-promise": "^6.0.0", 29 | "eslint-plugin-vue": "^9.7.0", 30 | "webpack": "^3.5.4" 31 | }, 32 | "repository": { 33 | "type": "git", 34 | "url": "git+https://github.com/OSSPhilippines/v-animate-css.git" 35 | }, 36 | "keywords": [ 37 | "vue", 38 | "vuejs", 39 | "animate", 40 | "animationcss", 41 | "animate-css" 42 | ], 43 | "author": "jofftiquez@gmail.com", 44 | "license": "MIT", 45 | "bugs": { 46 | "url": "https://github.com/OSSPhilippines/v-animate-css/issues" 47 | }, 48 | "homepage": "https://github.com/OSSPhilippines/v-animate-css#readme" 49 | } 50 | -------------------------------------------------------------------------------- /src/directives/animate.js: -------------------------------------------------------------------------------- 1 | import { animateNow } from './events'; 2 | import scrollMonitor from 'scrollmonitor'; 3 | 4 | export default (el, value, modifiers) => { 5 | const { 6 | click, hover, enter, enterFully, exit, exitPartially, 7 | } = modifiers; 8 | 9 | const elementWatcher = ( 10 | enter || enterFully || exit || exitPartially 11 | ) 12 | ? scrollMonitor.create(el) 13 | : false; 14 | 15 | if (typeof value === 'string') { 16 | value = { classes: value }; 17 | } 18 | 19 | if (click) { 20 | el.onclick = () => { 21 | animateNow(el, value, modifiers); 22 | }; 23 | return; 24 | } 25 | 26 | if (hover) { 27 | el.onmouseover = () => { 28 | animateNow(el, value, modifiers); 29 | }; 30 | return; 31 | } 32 | 33 | if (enter) { 34 | elementWatcher.enterViewport(() => { 35 | animateNow(el, value, modifiers); 36 | }); 37 | return; 38 | } 39 | 40 | if (enterFully) { 41 | elementWatcher.fullyEnterViewport(() => { 42 | animateNow(el, value, modifiers); 43 | }); 44 | return; 45 | } 46 | 47 | if (exit) { 48 | elementWatcher.exitViewport(() => { 49 | animateNow(el, value, modifiers); 50 | }); 51 | return; 52 | } 53 | 54 | if (exitPartially) { 55 | elementWatcher.partiallyExitViewport(() => { 56 | animateNow(el, value, modifiers); 57 | }); 58 | return; 59 | } 60 | 61 | animateNow(el, value, modifiers); 62 | }; 63 | -------------------------------------------------------------------------------- /src/directives/animations.json: -------------------------------------------------------------------------------- 1 | [ 2 | "animated", 3 | "bounce", 4 | "backInDown", 5 | "backInLeft", 6 | "backInRight", 7 | "backInUp", 8 | "backOutDown", 9 | "backOutLeft", 10 | "backOutRight", 11 | "backOutUp", 12 | "bounceIn", 13 | "bounceInDown", 14 | "bounceInLeft", 15 | "bounceInRight", 16 | "bounceInUp", 17 | "bounceOut", 18 | "bounceOutDown", 19 | "bounceOutLeft", 20 | "bounceOutRight", 21 | "bounceOutUp", 22 | "flash", 23 | "fadeIn", 24 | "fadeInDown", 25 | "fadeInDownBig", 26 | "fadeInLeft", 27 | "fadeInLeftBig", 28 | "fadeInRight", 29 | "fadeInRightBig", 30 | "fadeInUp", 31 | "fadeInUpBig", 32 | "fadeInTopLeft", 33 | "fadeInTopRight", 34 | "fadeInBottomLeft", 35 | "fadeInBottomRight", 36 | "fadeOut", 37 | "fadeOutDown", 38 | "fadeOutDownBig", 39 | "fadeOutLeft", 40 | "fadeOutLeftBig", 41 | "fadeOutRight", 42 | "fadeOutRightBig", 43 | "fadeOutUp", 44 | "fadeOutUpBig", 45 | "fadeOutTopLeft", 46 | "fadeOutTopRight", 47 | "fadeOutBottomLeft", 48 | "fadeOutBottomRight", 49 | "flipInX", 50 | "flipInY", 51 | "flipOutX", 52 | "flipOutY", 53 | "headShake", 54 | "heartBeat", 55 | "hinge", 56 | "jello", 57 | "jackInTheBox", 58 | "lightSpeedInRight", 59 | "lightSpeedInLeft", 60 | "lightSpeedOutRight", 61 | "lightSpeedOutLeft", 62 | "pulse", 63 | "rubberBand", 64 | "rotateIn", 65 | "rotateInDownLeft", 66 | "rotateInDownRight", 67 | "rotateInUpLeft", 68 | "rotateInUpRight", 69 | "rotateOut", 70 | "rotateOutDownLeft", 71 | "rotateOutDownRight", 72 | "rotateOutUpLeft", 73 | "rotateOutUpRight", 74 | "rollIn", 75 | "rollOut", 76 | "shakeX", 77 | "shakeY", 78 | "swing", 79 | "slideInDown", 80 | "slideInLeft", 81 | "slideInRight", 82 | "slideInUp", 83 | "slideOutDown", 84 | "slideOutLeft", 85 | "slideOutRight", 86 | "slideOutUp", 87 | "tada", 88 | "wobble", 89 | "zoomIn", 90 | "zoomInDown", 91 | "zoomInLeft", 92 | "zoomInRight", 93 | "zoomInUp", 94 | "zoomOut", 95 | "zoomOutDown", 96 | "zoomOutLeft", 97 | "zoomOutRight", 98 | "zoomOutUp" 99 | ] -------------------------------------------------------------------------------- /src/directives/events.js: -------------------------------------------------------------------------------- 1 | import animations from './animations'; 2 | 3 | export const animationEnd = (el, value, modifiers) => { 4 | if (modifiers.once) return; 5 | el.addEventListener('animationend', () => { 6 | const classes = el.classList; 7 | animations.forEach((item) => { 8 | if (classes.contains(`animate__${item}`)) { 9 | el.classList.remove(`animate__${item}`); 10 | if (value.removeAfterAnimation) { 11 | el.parentNode.removeChild(el); 12 | } 13 | } 14 | }); 15 | }); 16 | }; 17 | 18 | export const animateNow = (el, value, modifiers) => { 19 | const { classes, duration, delay, iteration } = value; 20 | 21 | if (duration) { 22 | el.style['-webkit-animation-duration'] = `${duration}ms`; 23 | el.style['-moz-animation-duration'] = `${duration}ms`; 24 | el.style['-o-animation-duration'] = `${duration}ms`; 25 | el.style['animation-duration'] = `${duration}ms`; 26 | } 27 | 28 | if (delay) { 29 | el.style['-webkit-animation-delay'] = `${delay}ms`; 30 | el.style['-moz-animation-delay'] = `${delay}ms`; 31 | el.style['-o-animation-delay'] = `${delay}ms`; 32 | el.style['animation-delay'] = `${delay}ms`; 33 | } 34 | 35 | if (iteration) { 36 | el.style['-webkit-animation-iteration-count'] = `${iteration}`; 37 | el.style['-moz-animation-iteration-count'] = `${iteration}`; 38 | el.style['-o-animation-iteration-count'] = `${iteration}`; 39 | el.style['animation-iteration-count'] = `${iteration}`; 40 | } 41 | 42 | el.classList.add('animate__animated', `animate__${classes}`); 43 | 44 | animationEnd(el, value, modifiers); 45 | }; 46 | -------------------------------------------------------------------------------- /src/directives/index.js: -------------------------------------------------------------------------------- 1 | import animate from './animate'; 2 | 3 | export default (Vue) => { 4 | Vue.directive('animate-css', { 5 | mounted: () => {}, 6 | beforeMount: (el, binding) => { 7 | const { value, modifiers } = binding; 8 | animate(el, value, modifiers); 9 | }, 10 | }); 11 | }; 12 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import directives from './directives'; 2 | 3 | const ANIMATE_CSS_CDN_LINK = 4 | 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css'; 5 | 6 | const VAnimateCss = { 7 | install (Vue, options = {}) { 8 | const animateCSSPath = options.animateCSSPath; 9 | const link = document.createElement('link'); 10 | link.rel = 'stylesheet'; 11 | link.href = animateCSSPath || ANIMATE_CSS_CDN_LINK; 12 | document.getElementsByTagName('head')[0].appendChild(link); 13 | 14 | directives(Vue); 15 | }, 16 | }; 17 | 18 | export default VAnimateCss; 19 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const webpack = require('webpack'); 3 | 4 | function createConfig (target) { 5 | let name = 'index.js'; 6 | 7 | if (target !== 'commonjs2') { 8 | name = 'v-animate-css.js'; 9 | } 10 | 11 | let output = { 12 | library: 'VAnimateCss', 13 | libraryTarget: target, 14 | path: path.resolve(__dirname, 'dist'), 15 | filename: name, 16 | }; 17 | 18 | if (typeof target === 'undefined') { 19 | name = 'vue-animate-css.js'; 20 | output = { 21 | path: path.resolve(__dirname, 'dist'), 22 | filename: name, 23 | }; 24 | } 25 | 26 | return { 27 | name: target, 28 | entry: './src', 29 | output, 30 | module: { 31 | rules: [ 32 | { 33 | test: /\.js$/, 34 | exclude: /(node_modules)/, 35 | use: { 36 | loader: 'babel-loader', 37 | options: { 38 | presets: ['env'], 39 | }, 40 | }, 41 | }, 42 | ], 43 | }, 44 | }; 45 | } 46 | 47 | module.exports = [ 48 | createConfig('var'), 49 | createConfig('commonjs2'), 50 | ]; 51 | --------------------------------------------------------------------------------