插件名称 | tinymotion |
---|---|
发布时间 | 2021年1月15日 |
插件作者 | lepikhinb |
Tinymotion是一个Vue.js动画库,可与Tailwind CSS无缝协作。
# NPM
$ npm i tinymotion
1.导入并注册Tinymotion。
import Motion from 'tinymotion';
export default {
components: { Motion },
data() {
return {
motion: {
// parameters here
}
}
}
}
2.悬停时触发动画。
<Motion
:hover="[
'rotate-0 rounded-xl',
'rotate-102 rounded-2xl scale-75',
'rotate-90 rounded-xl scale-100',
]"
:options="{ instantRollback: true }"
class="w-24 h-24 bg-indigo-600"
/>
3.单击触发动画。
<Motion
:click="[
'rotate-0 rounded-2xl',
'rotate-102 rounded-xl scale-50',
'rotate-90 rounded-2xl scale-100',
]"
class="w-24 h-24 bg-indigo-600 cursor-pointer"
/>
4.通过自定义元素触发动画。
<Motion
v-model="trigger"
:trigger="[
'rotate-0 bg-blue-600 rounded-xl',
'rotate-12 scale-125 bg-indigo-600',
'-rotate-6 scale-150 rounded-3xl',
'rotate-0 scale-100 rounded-xl bg-rose-600',
]"
class="w-24 h-24 cursor-pointer"
/>
5.在应用加载时触发动画。
<Motion
:auto="[
'scale-50',
'scale-75',
'scale-100',
'scale-125',
]"
:options="{ repeat: true, duration: 500 }"
class="w-24 h-24 rounded-full bg-indigo-600"
/>
6.所有可能的参数:
hover: [],
click: [],
trigger: [],
auto: [],
instantRollback: false,
rollback: true,
repeat: false,
factor: 0,
delay: 0,
stepDelay: 0,
skip: 0,
duration: 300,
ease: "ease-in-out",