Comments (11)
Great point — we might need to handle tables a bit better. We'll try to push out a fix by/on Monday.
from auto-animate.
Currently havent found a way to do this automatically. Ive done a number of tests, and the sequence of sizing/painting the browser does (for tables) is pretty wacky and – at the moment not very compatible with auto-animate. Still something Im interested in solving for though.
from auto-animate.
Got the same problem - this nice library unfortunately does not handle row removal well in grid/flex layouts. Spent a whole day trying to figure out what was wrong with my code. Turns out it's the first time it's objectively the library's issue, not mine. ¯\(ツ)/¯
from auto-animate.
@justin-schroeder Hey, sorry for pinging once more. Have you had time to give a look at it? This seems important feature if it is possible to add.
from auto-animate.
For table
tbody
tr
add/remove, I'm liking the results a little more than the defaults through simplifying the animation through a custom plugin:
const [parent] = useAutoAnimate((el, action) => {
let keyframes;
if (action === "add") {
keyframes = [
{ transform: "scale(.98)", opacity: 0 },
{ transform: "scale(1)", opacity: 1 },
];
}
if (action === "remove") {
keyframes = [
{ transform: "scale(1)", opacity: 1 },
{ transform: "scale(.98)", opacity: 0 },
];
}
if (action === "remain") {
keyframes = [{ opacity: 0.98 }, { opacity: 1 }];
}
return new KeyframeEffect(el, keyframes, { duration: 250, easing: "ease-in-out" });
});
I've also added overflow-hidden
to the containing div, which seems to hide the final "flash". But only sometimes.
from auto-animate.
For
table
tbody
tr
add/remove, I'm liking the results a little more than the defaults through simplifying the animation through a custom plugin:const [parent] = useAutoAnimate((el, action) => { let keyframes; if (action === "add") { keyframes = [ { transform: "scale(.98)", opacity: 0 }, { transform: "scale(1)", opacity: 1 }, ]; } if (action === "remove") { keyframes = [ { transform: "scale(1)", opacity: 1 }, { transform: "scale(.98)", opacity: 0 }, ]; } if (action === "remain") { keyframes = [{ opacity: 0.98 }, { opacity: 1 }]; } return new KeyframeEffect(el, keyframes, { duration: 250, easing: "ease-in-out" }); });
I've also added
overflow-hidden
to the containing div, which seems to hide the final "flash". But only sometimes.
@kevinashworth, thanks, your solution helped!
from auto-animate.
Is there any update on this?
from auto-animate.
just stumbled upon this from https://github.com/samselikoff
sandbox: https://codesandbox.io/s/github/samselikoff/2022-08-04-animated-table?file=/pages/index.tsx
repo: https://github.com/samselikoff/2022-08-04-animated-table
edit: also there is a video in which he explains things: https://www.youtube.com/watch?v=IfAv4NSv-nA
maybe we can get some tips from it and improve this library! I will dive into it tomorrow if I have some time.
from auto-animate.
Thanks for the suggestion. I took a look at it, and unfortunately its using some techniques that probably wont work for us, like fixed column widths.
from auto-animate.
Is there any progress on this?
from auto-animate.
Has anyone figured out a good workaround for this? Would love to use this with tbody
tr
from auto-animate.
Related Issues (20)
- Bug when deleting element of the array in React 18
- Inconsistent jumping inside flex item HOT 1
- Not working HOT 4
- Vue Virtual Scroller
- Wrong arguments order in AutoAnimationPlugin declaration
- Animate across lists? Across all elements inside a `ul`?
- How should I use fixed centering layout? HOT 1
- Incorrect rounding of element sizes while animating HOT 2
- When the page is refreshed, the component has no animation.
- Vue useAutoAnimate not working with v-if
- does not provide an export named 'autoAnimate'
- Animation starting coords are buggy when the container has transitioned positions
- How to add auto-animate to custom components (NuxtUI) HOT 1
- Headless UI + Auto-Animate | Issue with auto-animate conflicting HOT 1
- nuxt3 3.10.3 does not provide an export named 'autoAnimate' HOT 1
- I added the element from the front but the animation still appears from the last one HOT 1
- React.Children.map issue HOT 1
- How to animate single element? HOT 3
- The compatibility of TR tags is a bit difficult to use, and the TR animation effect has become distorted
- CDN support ?? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from auto-animate.