{"id":24547055,"url":"https://github.com/cheere/vue-animatecss-mixin","last_synced_at":"2026-05-09T18:35:24.067Z","repository":{"id":56608711,"uuid":"306266657","full_name":"cheere/vue-animatecss-mixin","owner":"cheere","description":"vue Animate.css","archived":false,"fork":false,"pushed_at":"2020-10-30T05:52:34.000Z","size":944,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-23T22:15:32.503Z","etag":null,"topics":["animate-css","nuxt","vue2"],"latest_commit_sha":null,"homepage":"https://cheere.github.io/vue-animatecss-mixin/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cheere.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-10-22T08:07:51.000Z","updated_at":"2022-08-24T08:10:50.000Z","dependencies_parsed_at":"2022-08-15T21:50:42.635Z","dependency_job_id":null,"html_url":"https://github.com/cheere/vue-animatecss-mixin","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cheere%2Fvue-animatecss-mixin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cheere%2Fvue-animatecss-mixin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cheere%2Fvue-animatecss-mixin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cheere%2Fvue-animatecss-mixin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cheere","download_url":"https://codeload.github.com/cheere/vue-animatecss-mixin/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243852945,"owners_count":20358341,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animate-css","nuxt","vue2"],"created_at":"2025-01-22T22:18:19.335Z","updated_at":"2026-05-09T18:35:24.011Z","avatar_url":"https://github.com/cheere.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-animatecss-mixin\n[vuejs - document - css - animation](https://cn.vuejs.org/v2/guide/transitions.html#CSS-%E5%8A%A8%E7%94%BB)\n\neasy to use animate.css .\n\n## DEMO\nonline-preview https://cheere.github.io/vue-animatecss-mixin/\n\n## install\n```sh\n  # npm\n  npm install vue-animatecss-mixin --save-dev\n```\n\nor\n\n```sh\n  # yarn\n  yarn add vue-animatecss-mixin --dev\n```\n\n### import with bundler\n```js\n  import AnimateCssMixin from 'vue-animatecss-mixin'\n  export default {\n    mixins: [AnimateCssMixin],\n  }\n```\n\n## Usage\ntodo: need to improve...\n\n#### have to\n```html\n  \u003cp data-animation=\"heartBeat slower repeat-4 delay-1s\"\u003eI'm animate.css demo\u003c/p\u003e\n```\n\n```js\n  beforeDestory() {\n    this.animateRemoveAllListener(/*refs or targets*/)\n  }\n```\n\n#### use animate.css\n```js\n  mounted() {\n    //-----------------play--------------------------\n    const refs = [ref0, ref1]\n    this.animatePlayground(refs)\n  }\n```\n\nor\n\n```js\n  mounted() {\n    // ----------------get element-------------------\n    const target0 = this.animateGetTarget(/* .className */)\n\n    //-----------------play--------------------------\n    this.animatePlayground([target0])\n  }\n```\n\nor\n\n```js\n  mounted() {\n    // ----------------get element-------------------\n    const target0 = this.animateGetTarget(/* .className */))\n    // or\n    const target1 = this.animateGetTarget(/* #id */))\n    // or\n    const target2 = this.animateGetTarget(/* ref */)\n    // const target2 = ref\n\n    //-----------------play--------------------------\n    const targets = [target0, target1, taget2]\n    this.animatePlayground(targets)\n  }\n```\n\n## Animate.css - document\n- GitHub: https://github.com/animate-css/animate.css\n- Doc: https://animate.style/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcheere%2Fvue-animatecss-mixin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcheere%2Fvue-animatecss-mixin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcheere%2Fvue-animatecss-mixin/lists"}