Comments (5)
For the delayed element, you could do a custom animation that just went from opacity: 0 -> 1. You can put a "style" attribute for opacity: 0 on the enter/leave prop that will get set immediately, and then the animation would start after a delay.
I think the delay is not really the issue as much as the Velocity UI Pack "In" transitions always starting from "display: none".
At any rate, glad you have something, and maybe this gives you ideas for improving it.
from velocity-react.
The reason the child animation is not running is because, to React, the inner VelocityTransitionGroup
and its child are appearing in the DOM together. By default, the animations only run on children that enter/leave an existing TransitionGroup.
To get the behavior you want, add runOnMount={true}
to the inner VelocityTransitionGroup
so that it will animate in this circumstance.
While there’s no cross-element chaining as you see, it should be fairly easy to just add a delay
on the inner animations so that they start when you want them to. (This gives you the flexibility to tweak things so that the fade in overlaps with the slide down if it’s appropriate.)
It's also possible to use custom UI Pack effects to do chaining in most circumstances (see velocityHelpers.registerEffect
) but that likely won’t work in this case because the “slide” effects are custom internal to Velocity in order to get implicit heights right.
Also, make sure to have key
properties on all children of VelocityTransitionGroup
.
Does that fix things?
from velocity-react.
inner VelocityTransitionGroup runOnMount={true} causes a flicker, and the parent slideDown doesn't animate, but the inner does
changed the inner to a VelocityComponent with runOnMount={true}, does not animate, just renders in the final position, but the parent works ok. NB: delay is not working on the inner
from velocity-react.
Hrm. Digging in, in slow motion, I noticed a few things.
First up, there's a bug in VelocityTransitionGroup
where it won’t run any animations unless a leave
prop is set. I’ll get a fix for this out later today.
Second, it may help to make sure any inner element is block-level. React’s TransitionGroup
(and by extension, VelocityTransitionGroup
) is a <span>
by default. Use component="div"
to change this.
I don’t know if slideDown
and delay
are going to work well together. slideDown
calculates the target height when it’s called. If you’re doing that on an element whose child’s animation is delayed, that child may have display: none
and therefore not influence its parent’s height.
You could probably work around that by writing a custom animation for the child that doesn’t affect the display and therefore height. (By default all Velocity UI Pack “In” and “Out” animations mess with display.)
from velocity-react.
ok you're right about slideDown and delay being incompatible, that makes sense. I was already using block elements, so it was just the slideDown and delay issue.
In the end, i had to hardcode the height, and make the outer component a VelocityComponent animating the height, then the inner is a VelocityTransitionGroup. Unfortunately its pretty messy code, so I wish there was some built-in support for either animating to/from height:auto or the aforementioned slideDown<->delay issue.
from velocity-react.
Related Issues (20)
- Conditional rendering inside VelocityTransitionGroup error in 1.4.0 HOT 2
- velocityHelpers is exported with a lowercase starting letter.
- examples
- Can't resolve velocity on create-react-app v2 HOT 5
- Update react-transition-group dep version
- No way to set duration or speed on VelocityTransitionGroup
- TypeError Cannot read property 'length' of null in velocity-component.js (v1.4.1) HOT 5
- Error caused by require TransitionGroup module directly HOT 4
- velocity-animate@^2.0.0 compatibility HOT 1
- next is not a function HOT 1
- slideDown finishes "too early" HOT 1
- Missing typings HOT 2
- Is this project still being developed? HOT 5
- Update react-transition-group HOT 3
- TransitionGroup CJS require not valid HOT 1
- Issue in Webpack production build
- VelocityTransitionGroup throws Strict Mode warnings HOT 3
- How to use sequences?
- TypeError: this.updater.enqueueCallback is not a function
- Upgrading to react 17 gives error 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 velocity-react.