{"_id":"@asika32764/vue-animate","_rev":"2-5661554efd706fa46baf0efdd113bf94","name":"@asika32764/vue-animate","dist-tags":{"latest":"3.0.2"},"versions":{"3.0.0":{"name":"@asika32764/vue-animate","homepage":"https://github.com/asika32764/vue-animate","version":"3.0.0","type":"module","css":"dist/vue-animate.css","main":"dist/vue-animate.cjs","browser":"dist/vue-animate.umd.js","module":"dist/vue-animate.es.js","typings":"dist/index.d.ts","scripts":{"dev":"vite","build":"rollup -c","build:docs":"vue-tsc && vite build","preview":"vite preview","generate":"ts-node -T --esm bin/generate.ts"},"devDependencies":{"@rollup/plugin-node-resolve":"^15.2.1","@rollup/plugin-typescript":"^11.1.3","@types/lodash-es":"^4.17.9","@types/node":"^20.6.2","@vitejs/plugin-vue":"^4.2.3","animate.css":"^4.1.1","lodash-es":"^4.17.21","postcss-discard-comments":"^6.0.0","postcss-header":"^3.0.3","postcss-import":"^15.1.0","rollup-plugin-copy":"^3.5.0","rollup-plugin-dts":"^6.0.2","rollup-plugin-esbuild":"^6.0.1","rollup-plugin-postcss":"^4.0.2","sass":"^1.67.0","ts-node":"^10.9.1","tslib":"^2.6.2","typescript":"^5.0.2","vite":"^4.4.5","vue":"^3.3.4","vue-tsc":"^1.8.5"},"gitHead":"925a9fb317d5f6ac5cefee9fd04a704f0cb7c660","description":"[](https://www.npmjs.com/package/vue2-animate) [](LICENSE)","_id":"@asika32764/vue-animate@3.0.0","_nodeVersion":"16.20.0","_npmVersion":"8.19.4","dist":{"integrity":"sha512-sG+JyOd0NPzq98ffQ/PZvaqA5sW/bfEXMEmwUg0pVaqHG38sMLzppcRPbF5ktI0RIbz2XaghjIRwPYKauS6I3w==","shasum":"24cd180c9395df3d8e062547540f0fa40bf833b7","tarball":"https://registry.npmjs.org/@asika32764/vue-animate/-/vue-animate-3.0.0.tgz","fileCount":116,"unpackedSize":192033,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHyfdkskqnv1AFUm0Acye8HFsINMaZ6+FGVPUXTjWcTpAiBGgOO/G0VFtWYyyxdCRbmRWsyE8iFBZF7Z5a54E6pitw=="}]},"_npmUser":{"name":"asika32764","email":"asika32764@gmail.com"},"directories":{},"maintainers":[{"name":"asika32764","email":"asika32764@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-animate_3.0.0_1696278596796_0.6996386279067901"},"_hasShrinkwrap":false},"3.0.1":{"name":"@asika32764/vue-animate","homepage":"https://github.com/asika32764/vue-animate","version":"3.0.1","license":"MIT","type":"module","css":"dist/vue-animate.css","main":"dist/vue-animate.cjs","browser":"dist/vue-animate.umd.js","module":"dist/vue-animate.es.js","typings":"dist/index.d.ts","scripts":{"dev":"vite","build":"rollup -c","build:docs":"vue-tsc && vite build","preview":"vite preview","generate":"ts-node -T --esm bin/generate.ts"},"devDependencies":{"@rollup/plugin-node-resolve":"^15.2.1","@rollup/plugin-typescript":"^11.1.3","@types/lodash-es":"^4.17.9","@types/node":"^20.6.2","@vitejs/plugin-vue":"^4.2.3","animate.css":"^4.1.1","lodash-es":"^4.17.21","postcss-discard-comments":"^6.0.0","postcss-header":"^3.0.3","postcss-import":"^15.1.0","rollup-plugin-copy":"^3.5.0","rollup-plugin-dts":"^6.0.2","rollup-plugin-esbuild":"^6.0.1","rollup-plugin-postcss":"^4.0.2","sass":"^1.67.0","ts-node":"^10.9.1","tslib":"^2.6.2","typescript":"^5.0.2","vite":"^4.4.5","vue":"^3.3.4","vue-tsc":"^1.8.5"},"gitHead":"28df9c6b5562a68e95728682cd4bab6191415c4c","description":"[](https://www.npmjs.com/package/vue2-animate) [](LICENSE)","_id":"@asika32764/vue-animate@3.0.1","_nodeVersion":"16.20.0","_npmVersion":"8.19.4","dist":{"integrity":"sha512-ZESev4i60q13EK9nhzhRDhhnC7UGcwA9IBWrgKMFFjhi/fWjc0mC0ZlMOp+Dwm4fC2M67WTc5TLLp0GhNYzWkg==","shasum":"294c1ba5a621f4ac01b953d371ea3a2792ee5c6f","tarball":"https://registry.npmjs.org/@asika32764/vue-animate/-/vue-animate-3.0.1.tgz","fileCount":116,"unpackedSize":192276,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE1lh/4o1wfQLIzTg54pK5ZHxscEfDCgo3z5vFZaYW7YAiEAtDS72BBGWDxrqm+/xwuogOVGnpEAzrpLV37CSHc2U1U="}]},"_npmUser":{"name":"asika32764","email":"asika32764@gmail.com"},"directories":{},"maintainers":[{"name":"asika32764","email":"asika32764@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-animate_3.0.1_1696282118966_0.15859723469411868"},"_hasShrinkwrap":false},"3.0.2":{"name":"@asika32764/vue-animate","homepage":"https://github.com/asika32764/vue-animate","version":"3.0.2","license":"MIT","css":"dist/vue-animate.css","main":"dist/vue-animate.cjs","browser":"dist/vue-animate.umd.js","module":"dist/vue-animate.es.js","typings":"dist/index.d.ts","scripts":{"dev":"vite","build":"rollup -c","build:prod":"NODE_ENV=production rollup -c","build:docs":"vue-tsc && vite build","preview":"vite preview","generate":"ts-node -T --esm bin/generate.ts"},"devDependencies":{"@rollup/plugin-node-resolve":"^15.2.1","@rollup/plugin-typescript":"^11.1.3","@types/lodash-es":"^4.17.9","@types/node":"^20.6.2","@vitejs/plugin-vue":"^4.2.3","animate.css":"^4.1.1","lodash-es":"^4.17.21","minimist":"^1.2.8","postcss-discard-comments":"^6.0.0","postcss-header":"^3.0.3","postcss-import":"^15.1.0","rollup-plugin-copy":"^3.5.0","rollup-plugin-dts":"^6.0.2","rollup-plugin-esbuild":"^6.0.1","rollup-plugin-postcss":"^4.0.2","sass":"^1.67.0","ts-node":"^10.9.1","tslib":"^2.6.2","typescript":"^5.0.2","vite":"^4.4.5","vue":"^3.3.4","vue-tsc":"^1.8.5"},"gitHead":"43444cbb34b33ac36cb9e6d7dc0bd8476dc6bc2d","description":"[](https://www.npmjs.com/package/@asika32764/vue-animate) [](LICENSE)","_id":"@asika32764/vue-animate@3.0.2","_nodeVersion":"16.20.0","_npmVersion":"8.19.4","dist":{"integrity":"sha512-VHfFDTVarHCvDlICgRl+4zOu0StstATMvr1dsPPxnfIefBIQFfxOCXtNu0xiNUMI4wPzhnaJIuRCYwT46PFpVw==","shasum":"b40f514f1b8151d1068e86c1afc934e09a8f5960","tarball":"https://registry.npmjs.org/@asika32764/vue-animate/-/vue-animate-3.0.2.tgz","fileCount":80,"unpackedSize":398873,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID6/uYIi360WUvwzM2ybO6WyzfWpSB0o4uS0fzpuJIcVAiB88HnxlPi9G0aa/Z5CObp/JvCm5vtWXj32UMoB/RDsqg=="}]},"_npmUser":{"name":"asika32764","email":"asika32764@gmail.com"},"directories":{},"maintainers":[{"name":"asika32764","email":"asika32764@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-animate_3.0.2_1697869730050_0.7551277690637845"},"_hasShrinkwrap":false}},"time":{"created":"2023-10-02T20:29:56.654Z","3.0.0":"2023-10-02T20:29:57.063Z","modified":"2023-10-21T06:28:50.465Z","3.0.1":"2023-10-02T21:28:39.219Z","3.0.2":"2023-10-21T06:28:50.273Z"},"maintainers":[{"name":"asika32764","email":"asika32764@gmail.com"}],"description":"[](https://www.npmjs.com/package/@asika32764/vue-animate) [](LICENSE)","homepage":"https://github.com/asika32764/vue-animate","readme":"# vue-animate\n\n[](https://www.npmjs.com/package/@asika32764/vue-animate)\n[](LICENSE)\n\nCross-browser CSS3 animation library, a port of animate.css for use with Vue.js transitions. [DEMO](https://vue-animate.simular.co/)\n\nSupport for:\n\n- Vue 2.x\n- Vue 3.x\n- Alpine.js\n\n## Credit\n\n- [@haydenbbickerton](https://github.com/haydenbbickerton/vue-animate) is the original [vue-animate (LESS)](https://github.com/haydenbbickerton/vue-animate) author (Only for Vue 1.x).\n- [@pavels-hyuna](https://github.com/pavels-hyuna) is v2 SCSS version author.\n\n## Table of Contents\n\n\n* [vue-animate](#vue-animate)\n * [Credit](#credit)\n * [Table of Contents](#table-of-contents)\n * [Installation](#installation)\n * [Transitions](#transitions)\n * [Custom Transition Classes](#custom-transition-classes)\n * [Custom Animation Properties](#custom-animation-properties)\n * [Slide as Mobile](#slide-as-mobile)\n * [Work with Alpine.js](#work-with-alpinejs)\n * [Attentions Seekers](#attentions-seekers)\n * [Options](#options)\n * [Contribution Guide](#contribution-guide)\n * [Build Lib](#build-lib)\n * [Build Docs](#build-docs)\n * [Sync from animate.css](#sync-from-animatecss)\n\n\n## Installation\n\nFrom NPM\n\n```shell\nnpm i @asika32764/vue-animate --save\n\nyarn add @asika32764/vue-animate\n```\n\nCDN\n\n```html\n\n```\n\n## Import\n\nImport animations for JS Bundler.\n\n```ts\nimport '@asika32764/vue-animate/dist/vue-animate.css';\n```\n\nImport in CSS or SCSS file.\n\n```css\n@import \"@asika32764/vue-animate/dist/vue-animate.css\";\n\n/* If you want to override CSS variables, write it just after importing */\n:root {\n --animate-duration: .3s;\n --animate-delay: 0;\n}\n```\n\n## Transitions\n\nUse [Vue.js transitions](https://vuejs.org/guide/built-ins/transition.html \"Vue.js Transitions\") as you normally would, but for the transition name you will use one of [Animate.css animations](https://animate.style/#utilities \"animations\") **removing** the `animate__` and `in/Out` from the name.\n\nFor example, if you want to use `animate__animated animate__fadeInLeft` and `animate__fadeInLeft` on your element, You could write:\n\n```html\n\n
\n {{ item }}\n
\n\n```\nenter/leave is already written in the stylesheet, so just remove `In/Out` from the name and you're golden.\n\n### Custom Transition Classes\n\nAnimate.css's original classnames are supported on enter/leave transitions. So if you're going to use [Custom Transition Classes](https://vuejs.org/guide/built-ins/transition.html#css-based-transitions \"Custom Transition Classes\"), you can either add *-enter/-leave* to the classes:\n\n```html\n\n
hello
\n\n```\nOr use the regular *In/Out* syntax:\n\n```html\n\n
\n\n```\n\n### Slide as Mobile\n\nThe view element must set position as absolute.\n\n```\n\n \n\n```\n\n## Work with Alpine.js\n\nAlpine `x-transition` must add `enter` and `leave` suffix, you have to add `In` and `Out` suffix after animation name.\n\n```html\n
...
\n```\n\nSee also: https://github.com/alpinejs/alpine#x-transition\n\n## Attentions Seekers\n\nTo use Attentions, vue-animate.css provides a set of JS functions.\n\n```ts\nimport { bounce } from '@asika32764/vue-animate';\nimport { ref } from 'vue';\n\nconst el = ref();\n\nbounce(el.value);\n```\n\n- [DEMO](https://vue-animate.simular.co/#attentions)\n- [Available Attentions Seekers](https://github.com/asika32764/vue-animate.css/tree/main/src/attentions)\n\n## Options\n\nYou could add animation properties to following parameters.\n\n```ts\nbounce(el.value, 300); // Durations 300ms\nbounce(el.value, '.3s'); // Durations 0.3seconds\nbounce(el.value, 300, { delay: 200 }); // Add duration and delay\nbounce(el.value, { duration: 300, delay: 200 }); // Add duration and delay by options object\n```\n\n| Option | Type | Description |\n|----------------|----------------------------------------------------|--------------------------------------|\n| duration | string, number | Can be any CSS valid duration value. |\n| delay | string, number | Can be any CSS valid duration value. |\n| iterationCount | string, number | The number of times to play. |\n| direction | `normal` `reverse` `alternate` `alternate-reverse` | The animation playing direction. |\n| fillMode | `none` `forwards` `backwards` `both` | The animation fill mode. |\n\n## Contribution Guide\n\nClone project and install deps.\n\n```shell\ngit clone git@github.com:asika32764/vue-animate.git\ncd vue-animate\nyarn install\n```\n\nRun:\n\n```shell\nyarn dev\n```\n\nWill launch a Vite dev server of the documentation site which the source file at `src/docs`.\nYou can modify this site to test your code. (Do not push you test code.)\n\n### Build Lib\n\nRun this command to build `/dist` files.\n\n```shell\nrollup -c\n```\n\n### Build Docs\n\nRun this command to build `/docs` files.\n\n```shell\nyarn build:docs\n```\n\n### Sync from animate.css\n\nThis project is auto convert from animate.css animations, if animate.css release new animations, \nyou can run this command to sync animations and auto generate source files.\n\n```shell\nyarn generate\n```\n","readmeFilename":"README.md","license":"MIT"}