Comments (5)
Is there a chance you could add an option for only animating certain types like MOVE?
Sure. I'm actually planning on removing the onEnter
animation since it's pretty opinionated, and I'd rather let the developer configure animations themselves, which is pretty straightforward to do:
const flipping = new Flipping({
onEnter: (stateMap) => {
Object.keys(stateMap).forEach(stateKey => {
const state = stateMap[key];
if (state.type === 'ENTER') {
// do your own custom animation
state.element.animate(...);
}
});
}
});
from flipping.
Are you trying to ask how you can animate out the other items? Also do you have a link to this code?
from flipping.
No. I just want the single grid item that was clicked to animate back in. Only the grid item I clicked in the screencast has a data-flip-key
that matches another element once the state is updated to show the details view for that item. The behavior shown in the screenshot appears to be caused by every grid item that has a data-flip-key
being animated back in regardless of whether or not the key matches an element in the previous state.
I dont have the code live on our staging server yet because it isn't working how I expect it to (please do let me know if I'm wrong). But maybe some pseudo code will help demonstrate the situation I just described.
So it starts out with markup like this:
Grid View
<div>
<div data-flip-key="agency">...</div>
<div data-flip-key="farmers-market">...</div>
<div data-flip-key="fashion">...</div>
<div data-flip-key="learning-management-lms">...</div>
<div data-flip-key="coffee-shop">...</div>
<div data-flip-key="restaurant">...</div>
<div data-flip-key="travel-agency">...</div>
<div data-flip-key="wedding">...</div>
<div data-flip-key="yoga-studio">...</div>
<div data-flip-key="design-agency">...</div>
<div data-flip-key="coffee-shop">...</div>
<div data-flip-key="photo-marketplace">...</div>
</div>
Details View
<div>
<div data-flip-key="restaurant" class="screenshot">...</div>
<div class="details">...</div>
</div>
After clicking on the restaurant grid item everything works fine (as shown in the gif). The markup is unchanged AFAICT. Now, if I click to go back to the gridview, instead of transitioning that one grid item back in, it transitions all the grid items back in (as shown in the gif). The markup again, appears to be unchanged (so there is nothing leftover that might hint at what is going wrong).
I hope that I was able to explain it in enough detail. Please let me know if it makes sense. In the meantime I will try and get the bug live on the staging server so you can see it if you think that would still be helpful 😃
from flipping.
After deeper investigation, I'm pretty sure the current behavior is intentional. I'm able to achieve the behavior I'm looking for by editing animation.ts
so it only returns animations for type MOVE
. IMO, this isn't an edge use case. All other libs that use the flipping technique behave the way I expected here. Is there a chance you could add an option for only animating certain types like MOVE
?
from flipping.
That makes much more sense than what I resorted to :doh: THANKS!!!
from flipping.
Related Issues (20)
- How to customize transitions? HOT 5
- Explanations of examples HOT 1
- Broken expand example
- FLIP with `appendChild` method HOT 1
- [Question] How would this work with nuxt and page transitions? HOT 2
- Cannot import adapters correctly HOT 2
- Animation to or from an underlying value is not yet supported. Firefox OSX HOT 4
- Vulnerabilities
- onEnter no longer triggered HOT 1
- Cannot set duration and easing when using CSS Adapter HOT 2
- animating between display block/none HOT 2
- Uncaught TypeError: Cannot read property 'parentElement' of undefined
- Can't import; problems with export declaration?
- Project Dead? HOT 3
- Expected behavior in the presence of nested flipping elements?
- Mithril FLIP HOT 4
- How do i import this into a typescript code-base? HOT 2
- TypeError: mitt is not a constructor HOT 4
- "Uncaught TypeError: mitt is not a constructor" HOT 4
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 flipping.