nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2025-01-18 21:36:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix animations

Browse Source
This commit is contained in:
MyNameIsBatman 2021-05-11 22:33:01 -03:00
parent 75fef86f67
commit 425a4cd885
4 changed files with 14 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/transitions/TransitionAnimationStyles.ts
View File

@ -11,6 +11,7 @@ export function getTransitionAnimationStyle(type: string, transition: Transition
switch(transition)
{
default:
return {}
case ENTERING:
return {
animationName: `bounceIn`,
@ -26,6 +27,7 @@ export function getTransitionAnimationStyle(type: string, transition: Transition
switch(transition)
{
default:
return {}
case ENTERING:
return {
animationName: `slideInLeft`,
@ -41,6 +43,7 @@ export function getTransitionAnimationStyle(type: string, transition: Transition
switch(transition)
{
default:
return {}
case ENTERING:
return {
animationName: `flipInX`,
@ -56,6 +59,7 @@ export function getTransitionAnimationStyle(type: string, transition: Transition
switch(transition)
{
default:
return {}
case ENTERING:
return {
animationName: `fadeInUp`,
@ -71,6 +75,7 @@ export function getTransitionAnimationStyle(type: string, transition: Transition
switch(transition)
{
default:
return {}
case ENTERING:
return {
animationName: `fadeIn`,
@ -86,6 +91,7 @@ export function getTransitionAnimationStyle(type: string, transition: Transition
switch(transition)
{
default:
return {}
case ENTERING:
return {
animationName: `fadeInDown`,
@ -101,6 +107,7 @@ export function getTransitionAnimationStyle(type: string, transition: Transition
switch(transition)
{
default:
return {}
case ENTERING:
return {
animationName: `headShake`,

25
src/views/purse/currency/CurrencyView.tsx
View File

@ -8,33 +8,18 @@ export function CurrencyView(props: CurrencyViewProps): JSX.Element
{
const { currency = null } = props;
const [ firstRender, setFirstRender ] = useState(true);
const [ isAnimating, setIsAnimating ] = useState(false);
const [ showUp, setShowUp ] = useState(false);
useEffect(() =>
{
if(firstRender)
{
setFirstRender(false);
return;
}
setIsAnimating(true);
const timeout = setTimeout(() => setIsAnimating(false), 305);
return () =>
{
clearTimeout(timeout);
}
}, [ firstRender, currency ]);
setShowUp(true);
}, [ currency ])
return (
<TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ isAnimating }>
<TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ showUp }>
<div className="col pe-1 pb-1">
<div className="d-flex bg-primary rounded border overflow-hidden">
<div className="d-flex flex-grow-1 align-items-center justify-content-end pe-1">{ !isAnimating && currency.amount }</div>
<div className="d-flex flex-grow-1 align-items-center justify-content-end pe-1">{ currency.amount }</div>
<div className="bg-secondary"><CurrencyIcon type={ currency.type } /></div>
</div>
</div>

2
src/views/toolbar/ToolbarView.tsx
View File

@ -59,7 +59,7 @@ export function ToolbarView(props: ToolbarViewProps): JSX.Element
return (
<>
{ <TransitionAnimation className="" type={ TransitionAnimationTypes.FADE_UP } inProp={ expandMeToolbar } timeout={ 300 }>
{ <TransitionAnimation className="" type={ TransitionAnimationTypes.FADE_IN } inProp={ expandMeToolbar } timeout={ 300 }>
<ToolbarMeView />
</TransitionAnimation> }
<div className="d-flex nitro-toolbar py-1 px-3">

2
src/views/toolbar/me/ToolbarMeView.scss
View File

@ -1,6 +1,6 @@
.nitro-toolbar-me {
position: absolute;
bottom: 10px;
bottom: 65px;
left: 15px;
z-index: $toolbar-zindex;
background: rgba(20, 20, 20, .95);