AutoAnimate - Add motion to your apps with a single line of code
source link: https://auto-animate.formkit.com/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Usage
AutoAnimate is fundamentally a single function — autoAnimate — that accepts a parent element. Automatic animations will be applied to the parent element and its immediate children. Animations are specifically triggered when one of three events occurs:
- A child is added in the DOM.
- A child is removed in the DOM.
- A child is moved in the DOM.
Let’s see what this looks like in practice. For now we'll use the autoAnimate function directly. React and Vue users — you’ll get some additional syntactic sugar later on — but for now let's learn the fundamentals:
import { useState, useRef, useEffect } from 'react'
import autoAnimate from '@formkit/auto-animate'
const Dropdown = () => {
const [show, setShow] = useState(false)
const parent = useRef(null)
useEffect(() => {
parent.current && autoAnimate(parent.current)
}, [parent])
const reveal = () => setShow(!show)
return <div ref={parent}>
<strong className="dropdown-label" onClick={reveal}>Click me to open!</strong>
{ show && <p className="dropdown-content" >Lorum ipsum...</p> }
</div>
}
export default Dropdown
- React LogoReact
- Native JS
Too easy! A gentle, smooth shift without adding any transition classes or custom CSS. This is a notable upgrade for end users with minimal developer effort required. Checkout the examples to see other use cases.
Tips for success
- It’s still ok to use other kinds of transitions. For example, if you are making stylistic changes with just CSS (such as a hover effect), then use standard CSS transitions for these kinds of styling tweaks.
- Animations are only triggered when immediate children of the parent element (the one you passed to
autoAnimate) are added, removed, or moved. - The parent element will automatically receive
position: relativeif it is statically positioned. Keep this in mind when writing your styles. - Sometimes flexbox layouts don’t resize their children immediately. A child with a
flex-grow: 1property waits for the surrounding content before snapping to its full width. AutoAnimate doesn’t work well in these cases, but if you give the element a more explicit width it should work like a charm.
Configuration
AutoAnimate is intended to be used with zero-configuration. We believe the default configuration falls in line with the project’s objective: AutoAnimate’s goal is to substantially improve an application’s user-experience without impacting the developer’s implementation time or performance budget. That said, some minor configuration options are available. AutoAnimate allows you to pass a second argument to autoAnimate with the following options:
autoAnimate(el, {
// Animation duration in milliseconds (default: 250)
duration: 250,
// Easing for motion (default: 'ease-in-out')
easing: 'ease-in-out'
})- Native JS
If your project’s specific requirements make it necessary to dramatically change the default animations, then you should check out the plugins documentation.
React hook
React users can use the hook useAutoAnimate by importing it from @formkit/auto-animate/react. This hook returns a ref to apply to the parent element:
import { useState } from 'react'
import { useAutoAnimate } from '@formkit/auto-animate/react'
const App = function () {
const [items, setItems] = useState([0, 1, 2])
const [parent] = useAutoAnimate(/* optional config */)
const add = () => setItems([...items, items.length])
return <>
<ul ref={parent}>
{items.map(
item => <li key={item}>{ item }</li>
)}
</ul>
<button onClick={add}>Add number</button>
</>
}
export default App
- React LogoReact
Vue directive
Vue users can globally register the v-auto-animate directive. This makes adding transitions and animations as easy as applying an attribute. Import the Vue plugin from @formkit/auto-animate/vue and register it with your Vue app:
import { createApp } from 'vue'
import { autoAnimatePlugin } from '@formkit/auto-animate/vue'
import App from 'App.vue'
createApp(App).use(autoAnimatePlugin).mount('#app')
- Native JS
Once you’ve registered the plugin, it can be applied anywhere in your application by adding the v-auto-animate directive to the parent element:
<script setup>
import { ref } from 'vue'
const items = ref(["😏","😐","😑","😒","😕", ... ])
function removeItem(toRemove) {
items.value = items.value.filter((item) => item !== toRemove)
}
</script>
<template>
<h5>Click emojis to remove them.</h5>
<ul v-auto-animate>
<li
v-for="item in items"
:key="item"
@click="removeItem(item)"
>
{{ item }}
</li>
</ul>
</template>
Vue users can pass options by directly setting the directive’s value <ul v-auto-animate="{ duration: 100 }">
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK