AnimateKeyframes does not fit within 50px X 50px #40
Comments
|
hey Gunnar, can you share your code? looks like it's probably an svg view port issue? cheers |
|
Hello.
Here is mu component ReactSvgIcon.jsx importing ReactLogo.svg. However, I want to rewrite ReactSvgIcon.jsx and use <AnimateKeyframes>. But that’s not possible, I cannot make <AnimateKeyFrames…> to fit inside 50px X 50px.
Best regards,
Gunnar Siréus
Tel: +46 708 940 567
Från: Bill <notifications@github.com>
Skickat: den 29 mars 2019 07:00
Till: bluebill1049/react-simple-animate <react-simple-animate@noreply.github.com>
Kopia: Gunnar Sireus <gunnar.sireus@gmail.com>; Author <author@noreply.github.com>
Ämne: Re: [bluebill1049/react-simple-animate] AnimateKeyframes does not fit within 50px X 50px (#40)
hey Gunnar,
can you share your code? looks like it's probably an svg view port issue?
cheers
bill
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub <#40 (comment)> , or mute the thread <https://github.com/notifications/unsubscribe-auth/ADvzaPvdwgWL2dJz-VxaxOz4Hvsb6Awyks5vbavXgaJpZM4cRqg7> . <https://github.com/notifications/beacon/ADvzaA3yXo2pCFD9wXk1L-zF7LeNQEHYks5vbavXgaJpZM4cRqg7.gif>
import React from 'react';
import reactLogo from "../../wwwroot/ReactLogo.svg";
export default class ReactIcon extends React.Component {
constructor(props) {
super(props);
}
render() {
let elementSpin = '@-webkit-keyframes elementSpin {0% {-webkit-transform: rotate(0)} 100% {-webkit-transform: rotate(360deg)}}';
if (!this.props.serverSideRendering) {
const isIE = /*@cc_on!@*/false || !!document.documentMode;
if (isIE) return;
let styleSheet = document.styleSheets[0];
styleSheet.insertRule(elementSpin, styleSheet.cssRules.length);
}
const appHeader = {
backgroundColor: '#222',
height: '50px',
width: 'auto',
color: 'red'
};
const appLogo = {
WebkitAnimationName: 'elementSpin',
WebkitAnimationTimingFunction: 'linear',
WebkitAnimationIterationCount: 'infinite',
WebkitAnimationDuration: '20s',
WebkitAnimationDelay: '0.01s',
WebkitAnimationPlayState: 'running',
WebkitAnimationFillMode: 'both',
height: '50px',
width: '50px',
align: 'left'
};
const left = { display: 'inline', textAlign: 'left' };
const middle = { display: 'inline', textAlign: 'center'};
const right = { display: 'inline', textAlign: 'right' };
return (
<div style={appHeader}>
<div style={left}><img src={reactLogo} style={appLogo} alt="reactLogo" /></div><div style={middle}>{this.props.text}</div><div style={right}><img src={this.props.icon} align='top' alt={this.props.iconClass} className={this.props.iconClass} /></div>
</div>);
}
}
|
|
Please read the documentation https://react-simple-animate.now.sh/animate-keyframes You can do code like below <AnimateKeyframes |
|
Hello.
I did exactly that. With my code it looks like this:
Using <AnimateKeyframes it becomes:
The updated component is attached.
Best regards,
Gunnar Siréus
Tel: +46 708 940 567
Från: Bill <notifications@github.com>
Skickat: den 29 mars 2019 07:58
Till: bluebill1049/react-simple-animate <react-simple-animate@noreply.github.com>
Kopia: Gunnar Sireus <gunnar.sireus@gmail.com>; Author <author@noreply.github.com>
Ämne: Re: [bluebill1049/react-simple-animate] AnimateKeyframes does not fit within 50px X 50px (#40)
Please read the documentation https://react-simple-animate.now.sh/animate-keyframes
You can do code like below
<AnimateKeyframes
play
iterationCount="infinite"
direction="alternate"
durationSeconds={10}
playState="running"
keyframes={[
'transform: rotateX(0) rotateY(0) rotateZ(0)',
'transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg)',
]}
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub <#40 (comment)> , or mute the thread <https://github.com/notifications/unsubscribe-auth/ADvzaNnXM2A4EGUgo2fA57TcaAk1uMDcks5vbbmCgaJpZM4cRqg7> . <https://github.com/notifications/beacon/ADvzaGMB0JjkQ92nALsgSnPFW7lL3xppks5vbbmCgaJpZM4cRqg7.gif>
import React from 'react';
import reactLogo from "../../wwwroot/ReactLogo.svg";
import { AnimateKeyframes } from "react-simple-animate";
export default class ReactIcon extends React.Component {
constructor(props) {
super(props);
}
render() {
const appHeader = {
backgroundColor: '#222',
height: '50px',
width: 'auto',
color: 'red'
};
const imageStyle = {
height: '50px',
width: '50px',
align: 'left'
};
const left = { display: 'inline', textAlign: 'left' };
const middle = { display: 'inline', textAlign: 'center'};
const right = { display: 'inline', textAlign: 'right' };
return (
<div style={appHeader}>
<div style={left}>
<AnimateKeyframes
play
iterationCount="infinite"
direction="alternate"
durationSeconds={10}
playState="running"
keyframes={[
'transform: rotateX(0) rotateY(0) rotateZ(0)',
'transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg)'
]}
<img src={reactLogo} style={imageStyle} alt="reactLogo" />
</AnimateKeyframes>
</div><div style={middle}>{this.props.text}</div><div style={right}><img src={this.props.icon} align='top' alt={this.props.iconClass} className={this.props.iconClass} /></div>
</div>);
}
}
|
|
any chance you can supply me with your svg? or is it just a react logo? |
|
it's a css problem, there is no width for your img. hence it fly off the screen. make sure you inspect the element and check the attribute on your element. if you could leave the repo with a star would be really nice to support the package. thanks ❤️ |
|
Thanks.
Looks nice. However, When I run it in my code I get “unexpected token”:
Asset Size Chunks Chunk Names
main-server.js 218 KiB main-server [emitted] main-server
ERROR in ./ClientApp/common/ReactSvgIcon.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:/Users/gunna/Documents/GitHub/SireusCore/SireusCore/ClientApp/common/ReactSvgIcon.jsx: Unexpected token (43:36)
41 | <img
42 | style={{
43 | ...style,
| ^
44 | width: 50
45 | }}
46 | src="https://facebook.github.io/create-react-app/img/logo.svg"
Från: Bill <notifications@github.com>
Skickat: den 29 mars 2019 23:11
Till: bluebill1049/react-simple-animate <react-simple-animate@noreply.github.com>
Kopia: Gunnar Sireus <gunnar.sireus@gmail.com>; Author <author@noreply.github.com>
Ämne: Re: [bluebill1049/react-simple-animate] AnimateKeyframes does not fit within 50px X 50px (#40)
https://codesandbox.io/s/6wyp4knkj3
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub <#40 (comment)> , or mute the thread <https://github.com/notifications/unsubscribe-auth/ADvzaObKpWekRacxQYFK6mPokL7nuTMcks5vbo-JgaJpZM4cRqg7> . <https://github.com/notifications/beacon/ADvzaKcAz_u5UXFxwSyYtGg8NC_IXFMrks5vbo-JgaJpZM4cRqg7.gif>
|
|
Hello again.
Now it works brilliantly. I had to update Babel to 7… .
Thanks a lot,
Gunnar
Från: Bill <notifications@github.com>
Skickat: den 29 mars 2019 23:11
Till: bluebill1049/react-simple-animate <react-simple-animate@noreply.github.com>
Kopia: Gunnar Sireus <gunnar.sireus@gmail.com>; Author <author@noreply.github.com>
Ämne: Re: [bluebill1049/react-simple-animate] AnimateKeyframes does not fit within 50px X 50px (#40)
https://codesandbox.io/s/6wyp4knkj3
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub <#40 (comment)> , or mute the thread <https://github.com/notifications/unsubscribe-auth/ADvzaObKpWekRacxQYFK6mPokL7nuTMcks5vbo-JgaJpZM4cRqg7> . <https://github.com/notifications/beacon/ADvzaKcAz_u5UXFxwSyYtGg8NC_IXFMrks5vbo-JgaJpZM4cRqg7.gif>
|
|
you happy to close this issue? |
|
Hello Bill.
Yes please close the issue. I must say that react-simple-animate is really impressing. I have read some of your other posts and I will continue to read your posts. They are amazingly good.
Best regards,
Gunnar Siréus
Tel: +46 708 940 567
Från: Bill <notifications@github.com>
Skickat: den 1 april 2019 03:07
Till: bluebill1049/react-simple-animate <react-simple-animate@noreply.github.com>
Kopia: Gunnar Sireus <gunnar.sireus@gmail.com>; Author <author@noreply.github.com>
Ämne: Re: [bluebill1049/react-simple-animate] AnimateKeyframes does not fit within 50px X 50px (#40)
you happy to close this issue?
—
You are receiving this because you authored the thread.
Reply to this email directly, <#40 (comment)> view it on GitHub, or <https://github.com/notifications/unsubscribe-auth/ADvzaJvclRX1icHId2HHfZxsrbzq0gbkks5vcVvRgaJpZM4cRqg7> mute the thread. <https://github.com/notifications/beacon/ADvzaFCDbZF2lVMiZZXM_xvUirg6v3zzks5vcVvRgaJpZM4cRqg7.gif>
|
|
thank you very much Gunnar, leave a star if you find it useful 🙏 |
|
Hello Bill.
I have three ReatcJS questions I hope you could help me with.
1. I would like to use <AnimateKeyFrames> for rotating an object. Today I’m using this code I found somewhere on internet:
export default class Rotate extends React.Component {
constructor(props) {
super(props);
this.state = {
play: this.props.play
};
}
componentWillMount() {
const elementRotate = '@-webkit-keyframes elementRotate {0% {-webkit-transform: rotate(0)} 100% {-webkit-transform: rotate(360deg)}}';
if (this.props.serverSideRendering) return;
const isIE = /*@cc_on!@*/false || !!document.documentMode;
if (isIE) return;
let styleSheet = document.styleSheets[0];
styleSheet.insertRule(elementRotate, styleSheet.cssRules.length);
}
componentWillReceiveProps(newProps) {
this.setState({ play: newProps.play });
}
render() {
const appLogo = {
WebkitAnimationName: 'elementRotate',
WebkitAnimationTimingFunction: 'linear',
WebkitAnimationFillMode: 'both',
WebkitAnimationIterationCount: this.props.count,
WebkitAnimationDuration: this.props.duration,
WebkitAnimationDelay: '0.01s',
WebkitAnimationPlayState: `${this.state.play ? 'running' : 'paused'}`,
visibility: `${this.state.play ? 'visible' : 'hidden'}`
};
return <div style={appLogo}>{this.props.children}</div>;
This works fine but I want to use <AnimateKeyFrames> instead.
I tried to do:
return (<div style={{ visibility: `${this.state.play ? 'visible': 'visible'}` }} >
<AnimateKeyframes
play={this.state.play}
playState={'running'}
easeType={'linear'}
iterationCount={this.props.count}
durationSeconds={this.props.duration}
keyframes={[
'transform: rotate(0)',
'transform: rotate(360deg)']}
{this.props.children}
</AnimateKeyframes>
</div>);
However, it’s not working. Can you help me?
2. Drag and Drop
Do you know any good library for Drag and Drop in React? I have read about Dan Abramow and his react-dnd library. I downloaded it and spent several hours trying to build it without succeeding. I has 11 branches and 114 contributors, and it seems quit messy I think.
There must be something better out there. Something that works.
3. Redux.
I have been using Redux in some applications and I have noticed that there is a lot of discussions on internet about Redux. When I code, I try to do everything as simple as possible and I try to eliminate all unnecessary code. Redux is used because of the “one way data transfer in React”. In Redux, the store is used as “single source of truth”.
I have some objections to this logic.
Single Source of truth. Most web applications have a database where data is stored. The db is updated with CRUD operations and the UI shows more or less the content of the db. In this case the db is the single source of truth. When using Redux, the store contains more or less a copy of the db. When updating the db, the store has also to be updated. This means we must do 2 updates.
In most professional web applications Redux is used. I feel that Redux is used just because it’s expected by a professional programmer to use Redux. No professional programmer will take the risk of being accused of developing unprofessional software. Another fact is that programmers like intellectual challenges, and Redux is a kind of intellectual challenge. There is a huge eco system with Redux code, for example Redux Forms, that can be used in a Redux application, which is good. However, I think that Redux is a kind of “necessary evil”. My objection is that I don’t think Redux is necessary. Do you have any example of any React application where it’s really necessary to use Redux?
Thanks in advance,
Gunnar Siréus
Tel: +46 708 940 567
Från: Bill <notifications@github.com>
Skickat: den 1 april 2019 13:02
Till: bluebill1049/react-simple-animate <react-simple-animate@noreply.github.com>
Kopia: Gunnar Sireus <gunnar.sireus@gmail.com>; Author <author@noreply.github.com>
Ämne: Re: [bluebill1049/react-simple-animate] AnimateKeyframes does not fit within 50px X 50px (#40)
thank you very much Gunnar, leave a star if you find it useful 🙏
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub <#40 (comment)> , or mute the thread <https://github.com/notifications/unsubscribe-auth/ADvzaDyL37abBuG0Cjxj0Us2WAjhxFRUks5vcecugaJpZM4cRqg7> . <https://github.com/notifications/beacon/ADvzaAxqFV4V5-_EnouCFcSxAHNzJWOPks5vcecugaJpZM4cRqg7.gif>
|
|
Hello again Bill.
It seems it is not possible to nest <AnimateKeyframes . Or?
Maybe each <AnimateKeyframes should have a name so in case of nesting they don’t get mixed up.
Best regards,
Gunnar Siréus
Tel: +46 708 940 567
Från: gunnarsireus@gmail.com <gunnarsireus@gmail.com>
Skickat: den 1 april 2019 11:30
Till: 'bluebill1049/react-simple-animate' <reply@reply.github.com>; 'bluebill1049/react-simple-animate' <react-simple-animate@noreply.github.com>
Kopia: 'Gunnar Sireus' <gunnar.sireus@gmail.com>; 'Author' <author@noreply.github.com>
Ämne: SV: [bluebill1049/react-simple-animate] AnimateKeyframes does not fit within 50px X 50px (#40)
Hello Bill.
Yes please close the issue. I must say that react-simple-animate is really impressing. I have read some of your other posts and I will continue to read your posts. They are amazingly good.
Best regards,
Gunnar Siréus
Tel: +46 708 940 567
Från: Bill <notifications@github.com <mailto:notifications@github.com> >
Skickat: den 1 april 2019 03:07
Till: bluebill1049/react-simple-animate <react-simple-animate@noreply.github.com <mailto:react-simple-animate@noreply.github.com> >
Kopia: Gunnar Sireus <gunnar.sireus@gmail.com <mailto:gunnar.sireus@gmail.com> >; Author <author@noreply.github.com <mailto:author@noreply.github.com> >
Ämne: Re: [bluebill1049/react-simple-animate] AnimateKeyframes does not fit within 50px X 50px (#40)
you happy to close this issue?
—
You are receiving this because you authored the thread.
Reply to this email directly, <#40 (comment)> view it on GitHub, or <https://github.com/notifications/unsubscribe-auth/ADvzaJvclRX1icHId2HHfZxsrbzq0gbkks5vcVvRgaJpZM4cRqg7> mute the thread. <https://github.com/notifications/beacon/ADvzaFCDbZF2lVMiZZXM_xvUirg6v3zzks5vcVvRgaJpZM4cRqg7.gif>
|
|
Why u couldn’t nest? Can u share the code? |
|
Hello.
Here’s my Rotate component:
import React from 'react';
import { AnimateKeyframes } from "react-simple-animate";
export default class Rotate extends React.Component {
constructor(props) {
super(props);
this.state = {
play: this.props.play
};
}
componentWillReceiveProps(newProps) {
this.setState({
play: newProps.play
});
}
render() {
return (<div style={{ visibility: `${this.state.play ? 'visible' : 'visible'}` }} >
<AnimateKeyframes
name={'xxx'}
play={this.state.play}
playState={'running'}
easeType={'linear'}
iterationCount={this.props.count}
durationSeconds={this.props.duration}
keyframes={[
'transform: rotate(0)',
'transform: rotate(360deg)']}
{this.props.children}
</AnimateKeyframes>
</div>);
}
}
And it’s just like this:
<div className="col-md-12" id="divSwirl">
<Rotate count={10} duration={"0.2s"} play={this.state.play}>
<AnimateKeyframes
name={'yyy'}
play={this.state.play}
iterationCount="1"
direction="alternate"
durationSeconds={2}
playState="running"
keyframes={[
'transform: scaleX(0.05) scaleY(0.05) scaleZ(0.05)',
'transform: scaleX(0.1) scaleY(0.1) scaleZ(0.1)',
'transform: scaleX(0.15) scaleY(0.15) scaleZ(0.15)',
'transform: scaleX(0.2) scaleY(0.2) scaleZ(0.2)',
'transform: scaleX(0.25) scaleY(0.25) scaleZ(0.25)',
'transform: scaleX(0.3) scaleY(0.3) scaleZ(0.3)',
'transform: scaleX(0.35) scaleY(0.35) scaleZ(0.35)',
'transform: scaleX(0.4) scaleY(0.4) scaleZ(0.4)',
'transform: scaleX(0.45) scaleY(0.45) scaleZ(0.45)',
'transform: scaleX(0.5) scaleY(0.5) scaleZ(0.5)',
'transform: scaleX(0.55) scaleY(0.55) scaleZ(0.55)',
'transform: scaleX(0.6) scaleY(0.6) scaleZ(0.7)',
'transform: scaleX(0.65) scaleY(0.65) scaleZ(1)',
'transform: scaleX(0.7) scaleY(0.7) scaleZ(0.7)',
'transform: scaleX(0.75) scaleY(0.75) scaleZ(0.65)',
'transform: scaleX(0.8) scaleY(0.8) scaleZ(0.7)',
'transform: scaleX(0.85) scaleY(0.85) scaleZ(0.8)',
'transform: scaleX(0.9) scaleY(0.9) scaleZ(0.9)',
'transform: scaleX(1) scaleY(1) scaleZ(1)'
]}
<PhotoFrame>
<a href={'/#/details/0/0/-?' + this.state.rand}>
<img onLoad={() => { this.setState({ play: true }); }} src={'/Handler/Index/PhotoID=0/Size=M?' + this.state.rand} alt="" style={{ border: "4px solid white", maxHeight: "100%", maxWidth: "100%", verticalAlign: "middle" }} />
</a>
</PhotoFrame>
</AnimateKeyframes>
</Rotate>
</div>
Thanks for your help, Gunnar
Från: Bill <notifications@github.com>
Skickat: den 3 april 2019 08:43
Till: bluebill1049/react-simple-animate <react-simple-animate@noreply.github.com>
Kopia: Gunnar Sireus <gunnar.sireus@gmail.com>; Author <author@noreply.github.com>
Ämne: Re: [bluebill1049/react-simple-animate] AnimateKeyframes does not fit within 50px X 50px (#40)
Why u couldn’t nest? Can u share the code?
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub <#40 (comment)> , or mute the thread <https://github.com/notifications/unsubscribe-auth/ADvzaJFa4XRoiCbFwJtOd-DOKMhqaI12ks5vdE14gaJpZM4cRqg7> . <https://github.com/notifications/beacon/ADvzaPjFoNccvBhdU60Tw-IOyl2JWtttks5vdE14gaJpZM4cRqg7.gif>
|
|
do you have an error by nest them? in theory it should worked |
|
No error simply no rotation
Från: Bill <notifications@github.com>
Skickat: den 3 april 2019 11:46
Till: bluebill1049/react-simple-animate <react-simple-animate@noreply.github.com>
Kopia: Gunnar Sireus <gunnar.sireus@gmail.com>; Author <author@noreply.github.com>
Ämne: Re: [bluebill1049/react-simple-animate] AnimateKeyframes does not fit within 50px X 50px (#40)
do you have an error by nest them?
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub <#40 (comment)> , or mute the thread <https://github.com/notifications/unsubscribe-auth/ADvzaDWt-PghYuAGB79mazpCac7nfzMyks5vdHhfgaJpZM4cRqg7> . <https://github.com/notifications/beacon/ADvzaCQ9RWYd0WihKLj34OgaUPDVLuE-ks5vdHhfgaJpZM4cRqg7.gif>
|
|
I see the problem please refer to my code below https://codesandbox.io/s/6wyp4knkj3 you can only have one animation attribute on one element, this is standard css animation. see above if you have two the second one will overwrite. so solution is in my code example as well, take a look and play around with it. thanks |
|
Thanks.
That works well.
Can you recommend any good ReactJS Drag & Drop library?
And what do you think about Redux?
Best regards,
Gunnar Siréus
Tel: +46 708 940 567
Från: Bill <notifications@github.com>
Skickat: den 3 april 2019 12:24
Till: bluebill1049/react-simple-animate <react-simple-animate@noreply.github.com>
Kopia: Gunnar Sireus <gunnar.sireus@gmail.com>; Author <author@noreply.github.com>
Ämne: Re: [bluebill1049/react-simple-animate] AnimateKeyframes does not fit within 50px X 50px (#40)
I see the problem please refer to my code below
https://codesandbox.io/s/6wyp4knkj3
you can only have one animation attribute on one element, this is standard css animation.
img {
animation: "2s linear 0s infinite alternate none running RSI-m25o8kbye";
animation: "2s linear 0s infinite alternate none running RSI-m25o8kby2";
}
see above if you have two the second one will overwrite. so solution is in my code example as well, take a look and play around with it.
thanks
bill
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub <#40 (comment)> , or mute the thread <https://github.com/notifications/unsubscribe-auth/ADvzaP_3MGUu1SGaWr3m_cIi86UVNGjuks5vdIEjgaJpZM4cRqg7> . <https://github.com/notifications/beacon/ADvzaBA4vq1ZTXP2CJxNgdExwLxyOs5Rks5vdIEjgaJpZM4cRqg7.gif>
|
|
not sure about drag and drop, but yea redux is good |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hello Bill.
I would like to use the <AnimateKeyFrames ...> component with a svg image. However, the maximum size is 50px X 50px and it seems to be impossible to compress AnimateKeyFrame to fit inside that size.
Thanks in advance, Gunnar Siréus
The text was updated successfully, but these errors were encountered: