plus1tv / react-anime Goto Github PK
View Code? Open in Web Editor NEW✨ (ノ´ヮ´)ノ*:・゚✧ A super easy animation library for React!
Home Page: https://codepen.io/collection/nrkjgo/
License: MIT License
✨ (ノ´ヮ´)ノ*:・゚✧ A super easy animation library for React!
Home Page: https://codepen.io/collection/nrkjgo/
License: MIT License
Hey, can you please publish the last master to npm? It would be useful to have the updated typescript interfaces that went into this MR: #45
Clicking on the link to either the API Docs or the Examples from the repo homepage just reloads the main https://hyperfuse.github.io/react-anime/ page...
Am I doing something wrong?
import Anime from 'react-anime';
function Header() {
return (
<div>
<h1>Header</h1>
<Anime>
<div style={{ width: 40, height: 40, background: 'blue' }} />
</Anime>
</div>
)
}
I've tried adding the props from the example, but without them I also get the same result. It simply makes my div
disappear.
I checked the docs and assumed that the lib didn't support strokeDashEffort for drawing an SVG's shape borders only to find that this example actually made use of the prop. Do you think the docs could use some improvements?
Hey there.
I noticed that the website is not working.
Just a suggestion: a github.io one?
Cheers
I am having an issue when the props.children change for an <Anime>
.
To solve my issue, I made this change to function componentWillReceiveProps
in react-anime.js file:
this.children = {
/*
cur: children.filter(function (c) {
return difChildren.indexOf(c) < 0;
}),
*/
cur: children,
prev: childrenWereRemoved ? difChildren : this.children.prev,
next: !childrenWereRemoved ? difChildren : this.children.next
};
For some reason, the filter was returning zero children, even though there was a child component.
I am using anime like this;
//inside parent component
<FadeIn>{messageWords}</FadeIn>
let FadeIn = props => {
return (
<Anime easing="linear"
autoplay={true}
duration={500}
direction="normal"
loop={false}
opacity={[0, 1]}
delay={(el, index) => ((index * 200) + 1500)}>
{props.children}
</Anime>
)
}
I saw Anime release version 2.0 23 days ago. Updating this lib would be great!
Trying to use react-anime for mounting/unmounting of components but animations are re-run every time component is re-rendered, regardless if something changes in child or <Anime ...>
definition.
e.g. <Anime opacity={[0, 1]}>hello</Anime>
will rapidly flash 'hello' each time you run setState
or e.g. props are changed via Redux. This makes the library a bit useless, particularly for Redux, as component must manually be cached and wrapped to avoid this behaviour.
Maybe a feature to limit animations to only run when mounting/unmounting could fix it temporarily.
Version: 2.0.1
The following TypeScript code, that uses styled-components only animates the first 4 divs (those with a style object). The other four (styled components) do not animate. Animation using the animejs library in componentdidmount with a css selector on the styled components does work. But I would prefer to use your wrapper library.
import * as React from "react";
import styled from "styled-components";
import Anime from "react-anime"
const Box = styled.div`
width: 20px;
height: 20px;
background: red;
`
export default class Test extends React.Component
{
public render(): JSX.Element
{
const style = {
width: "20px",
height: "20px",
background: "green"
}
return (
<div>
<Anime delay={(e, i) => i * 100}
scale={[.1, .9]}>
<div style={style}/>
<div style={style}/>
<div style={style}/>
<div style={style}/>
<Box/>
<Box/>
<Box/>
<Box/>
</Anime>
</div>
)
}
}
If I re-render(I'm using Gatsby built in react-router Link component) a page too fast e.g fast clicking; twice will drop the error 3 fast clicks will produce a blank white page. Any suggestions?
I am having some problems with getting the animation to work when wrapping the <Anime>
component with other components. Is this not supported? I could not find any relevant info in the documentation.
Example
Box component
import React from 'react';
export default function Box() {
let style = {
width: '100px',
height: '100px',
background: '#71bed6'
}
return <div style={style}>Box</div>
}
Index.js
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import Box from "./Box";
import Anime from "react-anime";
function App() {
return (
<div>
<p>With div</p>
<Anime
easing="easeInOutElastic"
duration={1000}
loop={true}
translateX={100}
>
<div className="box">Box</div>
</Anime>
<p>With component</p>
<Anime
easing="easeInOutElastic"
duration={1000}
loop={true}
translateX={100}
>
<Box />
</Anime>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
I have made the example in codesandbox
It would be easier if I could apply the animation to pre-made components instead of changing all of my components with the <Anime>
component.
Just trying to get something basic going, and it doesn't seem to be working.
Note: I have figured out how to use anime.js with React, and will be doing so until I can figure out how to use react-anime.
Here's my code:
render(){
const {classes} = this.props;
return (
<div className={classes.landscape}>
<div className={classes.centerpiece}>
<Anime delay={100} scale={[.1, .9]}>
<Dot className={classes.dot}/>
</Anime>
</div>
</div>
);
}
Hi, I've been trying to find a way to trigger the animation manually based on some conditions, but it looks like the only way to get a reference to the animation instance is through one of the begin, update or complete callback functions, and they all require the autoplay prop to be true to trigger. Is there any way that we can get the animation instance when the component mount?
Not sure if this is a known issue or not, just want to make sure.
Keyframes don't seem to work.
<Anime easing="easeInOutCirc"
targets={".highlightcolor"}
loop={true}
color={["#0000FF", "#FF0000", "#00FF00"]}
translateX={[
{ value: 250, duration: 1000, delay: 500, elasticity: 0 },
{ value: 0, duration: 1000, delay: 500, elasticity: 0 }
]}>
Does absolutely nothing when it comes to translation. The color property is only animated between "#0000FF", "#FF0000", so that's also not how these are supposed to work here, I guess.
Am I doing something wrong?
Hey all,
I'm trying to do some function based elasticity per the anime.js documentation.
The following works for duration and delay, but not for elasticity. Does React-Anime not support this feature? The function doesnt appear to have any impact on elasticity.
<Anime
translateY={[-400, 0]}
opacity={[0, 1]}
duration={ (el, i) => 3000 + 100 * i }
delay={ (el, i) => { console.log('delay?', i); return 3500 + 100 * i;} }
elasticity={ (el, i) => console.log('elastic?', i)}
complete={ props.onComplete ? props.onComplete : null}
easing="easeOutBack"
>
{props.text.split('').map( (el) => createLetter(el))}
</Anime>
The function gets called and logs for delay, but never does so for elasticity.
<Anime easing='easeOutBounce'
...
results in an error: "Uncaught TypeError: l.easing is not a function"
But:
<Anime easing='easeOutElastic'
...
does work.
Also: I couldn't find easeOutBounce
in the anime.js documentation.
Hi there. Could you give some example to animate components one by one, like kind of TimeLine animation in anime.js. It's not staggerAnimation of list's items. I want to animate two different components in two different places of page, but one by one. I know how it may be implemented with anime.js or gsap.
Is there some way to make it with react-anime?.
http://anime-js.com/documentation/#basicTimeline
I'll be grateful for any help, thanks.
Really not sure what I'm doing wrong here. Just trying to get a basic translation going so I can start working with the library.
Any ideas?
render(){
const {classes} = this.props;
return (
<div className={classes.landscape}>
<div className={classes.centerpiece}>
<Anime translateY={100} loop={true} autoplay={true}>
<Dot/>
</Anime>
</div>
</div>
);
}
It would be awesome to work on making this compatible with react-native
. This issue is meant to open discussion and suggestions.
It would be nice to have a list of default animations that can be used out of the box.
For example, animate.css has animations such as:
etc
See the example here:
Main example on react-anime doesn't compile in typescript
<Anime delay={(e, i) => i * 100}
scale={[.1, .9]}>
<div className="blue"/>
<div className="green"/>
<div className="red"/>
</Anime>
Anime declaration define multiple props as required which are not present in example. Can anyone explain me why those props are required? I'm new in react-anime and anime.js it self. Maybe I could help with typescript here?
Please see an example below:
https://codesandbox.io/s/20jn36m0l0
I checked the the docs, examples and source but I couldn't find any component equivalent to anime.timeline() is there any plan to include it?
seems like you changed the package name?
but still it refers to react-motion in the online docs.
Hi.
I am using React 16.4.2 and react-anime 2.1.0. And I have problem with direction and delay. If I use direction="reverse". Delay param flips.
Please see codesandox:
Sample 1 (React 15 & anime 0.3.4) - Delay works correctly
Sample 2 (React 16 & anime 2.1.0) - Delay flips
Code in both examples are identical only version of react and react-anime changes.
So question is does behavior of delay in 2.1.0 is correct. And if this behavior is correct how can i make that delay works like in version 0.3.4
Thanks
Today I tried to use the cascading list feature, which worked with an initial state, but it didn't work when updating the state.
I followed the steps written here: https://alain.xyz/libraries/react-anime
I created a codesandox to reproduce the issue: https://codesandbox.io/embed/github/profran/olimpiada-inet-2019/tree/master/
Hi,
Using create-react-app-ts, even a very basic
Fails on typescript errors:
ren?: ReactNode; }> & Rea...'.
Type '{ value: any; translateX: any; translateY: any; rotate: any; scale: any; opacity: any; color: any...' is not assignable to type 'Readonly'.
Types of property 'children' are incompatible.
Type 'Element' is not assignable to type 'any[]'.
Property 'find' is missing in type 'Element'.
Can you push up a new version of the package onto npm?
The local code is at version 2.0.2.
https://github.com/hyperfuse/react-anime/blob/master/packages/react-anime/package.json
But the code on npm is back at 0.3.4.
https://www.npmjs.com/package/react-anime
When I went to make a fix in the package I realized that the react lifecycle methods have since changed.
Hey,
I'm building a React-Anime button with an animated SVG and I want to publish it on NPM.
So that component would be a peer dependency of your project. But when I install your project, it does not automatically install animejs
.
Is this on purpose? Could you explain why?
Now when I publish mine, do I just require your package and leave a note for the user that they will need to npm i -S animejs
themselves?
Pipes (|
) in markdown tables must be escaped in order to render correctly. Currently the docs are missing important prop types because of this issue.
Hi,
Just discovered this today and it was a breeze to get this working!
I have each component set up with specific animations.
But when one component is updated, all the component in the container animate.
Even though the container itself does not have any animations defined.
Ideally I'd like only the specific component to animate and not the others.
Is there a way to stop this? May be I am doing something wrong?
Thanks
I thought it would be cool to use react-anime to create something like this: https://tympanus.net/Development/ShapeMorphIdeas/index3.html
I tried to morph the paths by wrapping each one in and added the "d" attribute for each one respectively, but nothing happens. Any suggestions would be greatly appreciated!
Here's my code:
<svg className="scene" width="100%" height="100%" preserveAspectRatio="none" viewBox="0 0 1440 800">
<Anime
easing="easeOutElastic"
direction="alternate"
loop={true}
autoplay={true}
duration={Math.floor(Math.random() * 5000) + 3000}
d="M -84.52,-81.13 C -94.62,-73.4 -88.88,-59.55 -90.33,-48.91 -89.29,27.31 -89.61,103.5 -88.33,179.8 -85.99,416.1 -81.32,888.9 -81.32,888.9 -81.32,888.9 974.5,888.7 1587,891.9 1518,719.9 1487,644 1429,533 1388,437.7 1447,259.7 1400,187 1362,132 1270,90.53 1207,39.93 1161,2.932 1071,-74.45 1071,-74.45 1071,-74.45 914.5,-77.77 848.2,-80.17 537.6,-80.84 227,-81.38 -83.6,-81.6 -83.91,-81.44 -84.21,-81.29 -84.52,-81.13 Z"
>
<path d="M -84.52,-81.13 C -94.62,-73.4 -88.88,-59.55 -90.33,-48.91 -89.29,27.31 -89.61,103.5 -88.33,179.8 -85.99,416.1 -81.32,888.9 -81.32,888.9 -81.32,888.9 974.5,888.7 1587,891.9 1518,719.9 1487,644 1429,533 1388,437.7 1447,259.7 1400,187 1362,132 1270,90.53 1207,39.93 1161,2.932 1071,-74.45 1071,-74.45 1071,-74.45 914.5,-77.77 848.2,-80.17 537.6,-80.84 227,-81.38 -83.6,-81.6 -83.91,-81.44 -84.21,-81.29 -84.52,-81.13 Z"></path>
</Anime>
<Anime
easing="easeOutElastic"
direction="alternate"
loop={true}
autoplay={true}
duration={Math.floor(Math.random() * 5000) + 3000}
d="M 665.2,-83.08 C 413.7,-81.89 162.2,-82.43 -89.29,-81.61 -90.35,164.3 -85.06,410.2 -84.09,656.1 -83.37,733.7 -82.64,811.3 -81.92,888.9 442.4,889.8 966.7,890.7 1491,891.6 1253,747.5 1417,429.4 1286,245.4 1227,163.2 1107,142.1 1043,64.54 1009,24.41 973,-76.01 973,-76.01 973,-76.01 706.6,-83.67 665.2,-83.08 Z"
>
<path d="M 665.2,-83.08 C 413.7,-81.89 162.2,-82.43 -89.29,-81.61 -90.35,164.3 -85.06,410.2 -84.09,656.1 -83.37,733.7 -82.64,811.3 -81.92,888.9 442.4,889.8 966.7,890.7 1491,891.6 1253,747.5 1417,429.4 1286,245.4 1227,163.2 1107,142.1 1043,64.54 1009,24.41 973,-76.01 973,-76.01 973,-76.01 706.6,-83.67 665.2,-83.08 Z"></path>
</Anime>
<Anime
easing="easeOutElastic"
direction="alternate"
loop={true}
autoplay={true}
duration={Math.floor(Math.random() * 5000) + 3000}
d="M -85.01,-74.02 C -92.39,-66.64 -85.37,-55.79 -87.81,-46.91 -86.65,265.1 -84.66,577.2 -83.18,889.2 317.2,888.3 717.5,885.8 1118,890.4 1152,890.6 1187,890.9 1221,890 1219,768.3 1224,643.6 1187,526 1153,417 1091,319.3 1029,224.1 998.8,178.5 968.8,132.6 936.6,88.23 891.7,27.39 772.2,-78.96 772.2,-78.96 772.2,-78.96 222.1,-81.07 -85.01,-74.02 Z"
>
<path d="M -85.01,-74.02 C -92.39,-66.64 -85.37,-55.79 -87.81,-46.91 -86.65,265.1 -84.66,577.2 -83.18,889.2 317.2,888.3 717.5,885.8 1118,890.4 1152,890.6 1187,890.9 1221,890 1219,768.3 1224,643.6 1187,526 1153,417 1091,319.3 1029,224.1 998.8,178.5 968.8,132.6 936.6,88.23 891.7,27.39 772.2,-78.96 772.2,-78.96 772.2,-78.96 222.1,-81.07 -85.01,-74.02 Z"></path>
</Anime>
<Anime
easing="easeOutElastic"
direction="alternate"
loop={true}
autoplay={true}
duration={Math.floor(Math.random() * 5000) + 3000}
d="M -92.42,-79.11 C -89.97,243.8 -87.52,566.7 -85.07,889.6 201.8,889.9 488.7,889.9 775.5,895.6 880.4,896.9 985.2,894 1090,892.5 1064,773.3 1037,651.6 976.1,544.8 946.7,495.8 914.6,448.3 882,401.3 820.9,314.4 742.3,252 666.4,177.4 583.2,98.01 496.5,12.18 386.7,-23.38 328.4,-45.64 232.6,-81.38 232.6,-81.38 232.6,-81.38 9.82,-84.94 -92.42,-79.11 Z"
>
<path d="M -92.42,-79.11 C -89.97,243.8 -87.52,566.7 -85.07,889.6 201.8,889.9 488.7,889.9 775.5,895.6 880.4,896.9 985.2,894 1090,892.5 1064,773.3 1037,651.6 976.1,544.8 946.7,495.8 914.6,448.3 882,401.3 820.9,314.4 742.3,252 666.4,177.4 583.2,98.01 496.5,12.18 386.7,-23.38 328.4,-45.64 232.6,-81.38 232.6,-81.38 232.6,-81.38 9.82,-84.94 -92.42,-79.11 Z"></path>
</Anime>
<Anime
easing="easeOutElastic"
direction="alternate"
loop={true}
autoplay={true}
duration={Math.floor(Math.random() * 5000) + 3000}
d="M -88.6,95.54 C -90.38,166.1 -88.23,236.7 -88.68,307.4 L -86.19,890 C 229.7,890.2 939.8,892.4 939.8,892.4 855.2,767 831,639.4 721.4,519.4 634.7,424.5 526.4,360.9 428.8,281.8 332.7,204 251.6,102.3 140.1,48.9 70.75,15.73 -24.82,24.2 -85.28,0.03 Z"
>
<path d="M -88.6,95.54 C -90.38,166.1 -88.23,236.7 -88.68,307.4 L -86.19,890 C 229.7,890.2 939.8,892.4 939.8,892.4 855.2,767 831,639.4 721.4,519.4 634.7,424.5 526.4,360.9 428.8,281.8 332.7,204 251.6,102.3 140.1,48.9 70.75,15.73 -24.82,24.2 -85.28,0.03 Z"></path>
</Anime>
<Anime
easing="easeOutElastic"
direction="alternate"
loop={true}
autoplay={true}
duration={Math.floor(Math.random() * 5000) + 3000}
d="M -95.69,252.3 -87.65,890.4 698.1,892 C 698.1,892 599.1,687.7 518.9,610.6 348,446.2 131.4,466.5 -95.69,252.3 Z"
>
<path d="M -95.69,252.3 -87.65,890.4 698.1,892 C 698.1,892 599.1,687.7 518.9,610.6 348,446.2 131.4,466.5 -95.69,252.3 Z"></path>
</Anime>
<Anime
easing="easeOutElastic"
direction="alternate"
loop={true}
autoplay={true}
duration={Math.floor(Math.random() * 5000) + 3000}
d="M -85.59,444.4 -85.59,890.6 489,895.6 C 489,895.6 436.8,745.3 382.5,690.8 258.1,565.8 57.98,629.2 -85.59,444.4 Z"
>
<path d="M -85.59,444.4 -85.59,890.6 489,895.6 C 489,895.6 436.8,745.3 382.5,690.8 258.1,565.8 57.98,629.2 -85.59,444.4 Z"></path>
</Anime>
</svg>
.scene {
position: fixed;
background: #282886;
z-index: -10;
}
.scene g:first-child path {
fill: #4f4fea;
}
.scene g:nth-child(2) path {
fill: #0c27cf;
}
.scene g:nth-child(3) path {
fill: #13269c;
}
.scene g:nth-child(4) path {
fill: #242468;
}
.scene g:nth-child(5) path {
fill: #2648e6;
}
.scene :nth-child(6) path {
fill: #2c31b0;
}
.scene g:nth-child(7) path {
fill: #262689;
}
Hi there,
Trying to use React Anime in my project, and I keep getting the above error!
node v9.8.0
react v16.2.0
Snippet of my code:
render () {
const { type, show, title, fetching, handleCloseModal, initialValues } = this.props
let defaultValues = initialValues || {}
let animeProps = {
opacity: [0, 1],
translateY: [-64, 0],
delay: (el, i) => i * 200
}
return (
<Anime {...animeProps}>
{
show &&
<ActionModal
title={title}
show={show}
fetching={fetching}
onClose={handleCloseModal}>
{this._renderForm(type, defaultValues)}
</ActionModal>
}
</Anime>
)
}
Where show
is a bool being passed from the parent component. I am also using styled-components
throughout the app if that makes any difference?
The error seems to be in the actual anime.min.js
file inside node_modules - not inside react-anime
itself, but there is nothing there on the issue either. Anyone had this before and manage to solve it?
I'm fairly new with React and had some questions using this module.
The idea is to have an element that animates opacity and becomes hidden after animation based on a button toggle (opacity 0 doesn't works in this case since mouse events still works in an element with opacity 0, so display: none or visibility:hidden should work)
Problem: I need to animate opacity based on custom prop, it's ok and animates perfectly using opacity={this.props.opened ? 1 : 0}. But at the end of animation, i need to apply {visibility: 'hidden'} or {display: 'none'} to child component, and on animation start, i also need to apply back {visibility: 'visible'} for element to reaper.
I tried keeping this style in state but when i call setState in 'begin' method it enters in an infinite loop. also, i tried to set style directly using this.refs but it returns Uncaught TypeError: Can't add property style, object is not extensible
What are the best ways to approach this problem?
It requires a global React?
This is SOOO much simpler than other react animation tools out there. If it supported mounting and unmounting animations, it would be the best option available IMO. Have you considered adding this feature?
The documentation doesn't show after the loading animation. I've tried across different browsers but the results are the same
I am getting an error using this library using v8.9.4 of Node.
import Anime from 'react-anime';
....
<Anime delay={(e, i) => i * 100}
scale={[.1, .9]}>
<div className="blue"/>
<div className="green"/>
<div className="red"/>
</Anime>
This may be because I am using Gatsby, which may require one to transpile to es5 before using a library but I am not sure.
Using a blank create-react-app application, with only react-anime installed and only a simple Anime tag I get this warning in Chrome:
Warning: The tag <g> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
Trying to animate the following:
<polygon strokeWidth='1' stroke='currentColor' points='70 24 119.574 60.369 100.145 117.631 50.855 101.631 3.426 54.369' />
...and getting Error: Problem parsing points="[object Object]"
, a whole bunch of times. Here's the whole component:
<svg width='140' height='140' viewBox='0 0 140 140'>
<g fill='currentColor' fillOpacity='.15' transform='translate(0 6)'>
<polygon points='70 0 136.574 48.369 111.145 126.631 28.855 126.631 3.426 48.369' />
<polygon points='70 18 119.455 53.931 100.565 112.069 39.435 112.069 20.545 53.931' />
<polygon points='70 34.86 101.727 57.911 89.609 95.209 50.391 95.209 38.273 57.911' />
<polygon points='70 50.898 84.864 61.697 79.186 79.171 60.814 79.171 55.136 61.697' />
</g>
<g fill='none' fillRule='evenodd'>
<Anime
points={[
{
value: '70 41 118.574 59.369 111.145 132.631 60.855 84.631 20.426 60.369'
}, {
value: '70 6 119.574 60.369 100.145 117.631 39.855 117.631 55.426 68.369'
}, {
value: '70 57 136.574 54.369 89.145 100.631 28.855 132.631 38.426 64.369'
}, {
value: '70 24 119.574 60.369 100.145 117.631 50.855 101.631 3.426 54.369'
}
]}
easing='easeOutQuad'
duration={2000}
loop={false}
>
<polygon strokeWidth='1' stroke='currentColor' points='70 24 119.574 60.369 100.145 117.631 50.855 101.631 3.426 54.369' />
</Anime>
</g>
</svg>
Hey,
I am trying to write tests to check the state changes of my component on mouse enter.
describe('animeButton', () => {
it('swaps between normal and hover views', () => {
const Button = mount( <AnimeButton
hoverTextClassName="hoverText"
normalTextClassName="normalText" />);
// ReactTestUtils.Simulate.mouseEnter(Button); <-- Would also error out
const element = Button.find('a');
element.simulate('mouseEnter'); <-- Errors out
When I run the little bit of code, I get an error 'NodeList is not defined' from Line 219 of /dist/anime.js. I was able to alter the source code to get passed this function if of unknownHTMLElement type, but then I hit a tags button elsewhere in the anime.js source code.
Ive tried many different approaches and cant find a way to simulate this mouseEnter.
What's the current recommended solution for testing components that use Anime components?
Full Error Log:
1) animeButton swaps between normal and hover views:
ReferenceError: NodeList is not defined
at p (node_modules/react-anime/dist/anime.min.js:1:3112)
at Array.map (native)
at _ (node_modules/react-anime/dist/anime.min.js:1:5577)
at Q (node_modules/react-anime/dist/anime.min.js:1:8715)
at H (node_modules/react-anime/dist/anime.min.js:1:9096)
at e.createAnime (node_modules/react-anime/dist/anime.min.js:1:12115)
at e.value (node_modules/react-anime/dist/anime.min.js:1:11575)
at node_modules/react-dom/lib/ReactCompositeComponent.js:264:25
at measureLifeCyclePerf (node_modules/react-dom/lib/ReactCompositeComponent.js:75:12)
at node_modules/react-dom/lib/ReactCompositeComponent.js:263:11
at CallbackQueue.notifyAll (node_modules/react-dom/lib/CallbackQueue.js:76:22)
at ReactReconcileTransaction.close (node_modules/react-dom/lib/ReactReconcileTransaction.js:80:26)
at ReactReconcileTransaction.closeAll (node_modules/react-dom/lib/Transaction.js:209:25)
at ReactReconcileTransaction.perform (node_modules/react-dom/lib/Transaction.js:156:16)
at ReactUpdatesFlushTransaction.perform (node_modules/react-dom/lib/Transaction.js:143:20)
at ReactUpdatesFlushTransaction.perform (node_modules/react-dom/lib/ReactUpdates.js:89:32)
at Object.flushBatchedUpdates (node_modules/react-dom/lib/ReactUpdates.js:172:19)
at ReactDefaultBatchingStrategyTransaction.closeAll (node_modules/react-dom/lib/Transaction.js:209:25)
at ReactDefaultBatchingStrategyTransaction.perform (node_modules/react-dom/lib/Transaction.js:156:16)
at Object.batchedUpdates (node_modules/react-dom/lib/ReactDefaultBatchingStrategy.js:62:26)
at Object.batchedUpdates (node_modules/react-dom/lib/ReactUpdates.js:97:27)
at node_modules/react-dom/lib/ReactTestUtils.js:349:18
at ReactWrapper.<anonymous> (node_modules/enzyme/build/ReactWrapper.js:776:11)
at ReactWrapper.single (node_modules/enzyme/build/ReactWrapper.js:1421:25)
at ReactWrapper.simulate (node_modules/enzyme/build/ReactWrapper.js:769:14)
at Context.<anonymous> (test/index2.test.js:26:13)```
looks like its missing some core files
This currently does not work:
class Button extends React.Component {
render () {
return <button>{this.props.children}</button>
}
}
// functional components don't work anyway because we can't attach a ref
// const Button = ({ children }) => <button>{children}</button>
function App () {
return (
<Anime opacity={[0, 1]} translateY={'1em'}>
<Button>Hello World</Button>
</Anime>
)
}
We could solve this by querying the raw dom node using findDOMNode()
but that would make it even more incompatible with react-native
because of the react-dom
dep.
When inserting an component within one of my containers (i.e a 50% container) to animate a child of a relative width (i.e 100% of its container), the will break the relative width chain and not occupy the full container.
Proposed fix: initiating Anime components with a width style of 100% or to give g elements a property of width: 100% in the .css.
Let me know if you approve of a solution to this issue and I can make the PR
It would be lovely if there were moar examples on the readme, I can't seem to trigger another animation using the complete callback, like in https://github.com/juliangarnier/anime/blob/master/examples/callbacks.html
TIA
Hi there. I want to use defaultStyles like react-motion to prevent executing animation on mount component. Is there some way to achieve it?
Thanks.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.