Comments (11)
hi @stroborobo,
I can definitely support object syntax which aligns with <Animate />
.
for at: 0
, you can use Object.entity to get the key and value.
from react-simple-animate.
i think it's better to support both, then it's not a breaking change @pangpang1987
from react-simple-animate.
@pangpang1987 I have tested the feature branch works great 👍
however this is not workingkeyframes={[{ 0: {opacity: 0}}, {100: {opacity: 1}}]}
I will publish what you got with a minor update first, we can patch in the next release
from react-simple-animate.
hey @pangpang1987,
Did you have the capacity to convert object into a string for AnimateKeyFrames?
basically, support
<AnimateKeyframes
play
delay={1}
duration={10}
iterationCount={3}
direction="alternative"
keyframes={[
{transform: 'translateY(0)'},
{transform: 'translateY(10px)'},
]}
>
currently, we support only string:
<AnimateKeyframes
play
delay={1}
duration={10}
iterationCount={3}
direction="alternative"
keyframes={[
'transform: translateY(0)',
'transform: translateY(10px)',
]}
>
from react-simple-animate.
for at: 0, you can use Object.entity to get the key and value
Object.entries? Absolutely, at
was a brain fart anyway, I could just use maps or tuple lists instead m( But thanks for considering the main part of this request :)
from react-simple-animate.
haha no worries @stroborobo , either @pangpang1987 or I will work on that feature.
from react-simple-animate.
@bluebill1049 I can work on this. Keep the styles object.
from react-simple-animate.
thanks, heaps @pangpang1987 legend.
from react-simple-animate.
thanks, heaps @pangpang1987 legend.
Do you want to reimplement the two step senerario to use from to? Or keep the existing one?
from react-simple-animate.
https://github.com/bluebill1049/react-simple-animate/releases/tag/3.3.0
from react-simple-animate.
Looks like the above use is low. Going to close it for now
from react-simple-animate.
Related Issues (20)
- webkit no animation HOT 2
- Animation bug when adding new item HOT 1
- Feature Request: Pass className to animation HOT 4
- Animating only when user starts scrolling for SEO HOT 9
- play value from useAnimate cannot be use in useEffect HOT 10
- Animate inside AnimateGroup ignores complete HOT 11
- Re-render on parent triggers animation HOT 3
- TypeError: useRef$1 is not a function HOT 5
- useAnimate question, not a bug HOT 7
- Unable to get useAnimateGroup hook or AnimateGroup to apply the initial start styles. HOT 5
- Animation does not play back HOT 2
- `AnimateGroup` question, not a bug HOT 2
- Children of Animation frame are lost when their width and height defined using flex and precentage. HOT 2
- Documentation Error HOT 2
- useAnimateKeyFrames animation runs when component is updated via other useState variables. HOT 1
- Prevent reverse animation, continue with the same animation. HOT 2
- Animation component is full width? HOT 4
- Support for rgb() / rgba() HOT 1
- useAnimateGroup doesn't work as expected after the second time the play function gets called 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 react-simple-animate.