mirror of
https://github.com/billsonnn/nitro-react.git
synced 2025-01-19 05:46:27 +01:00
Fix animations
This commit is contained in:
parent
75fef86f67
commit
425a4cd885
@ -11,6 +11,7 @@ export function getTransitionAnimationStyle(type: string, transition: Transition
|
|||||||
switch(transition)
|
switch(transition)
|
||||||
{
|
{
|
||||||
default:
|
default:
|
||||||
|
return {}
|
||||||
case ENTERING:
|
case ENTERING:
|
||||||
return {
|
return {
|
||||||
animationName: `bounceIn`,
|
animationName: `bounceIn`,
|
||||||
@ -26,6 +27,7 @@ export function getTransitionAnimationStyle(type: string, transition: Transition
|
|||||||
switch(transition)
|
switch(transition)
|
||||||
{
|
{
|
||||||
default:
|
default:
|
||||||
|
return {}
|
||||||
case ENTERING:
|
case ENTERING:
|
||||||
return {
|
return {
|
||||||
animationName: `slideInLeft`,
|
animationName: `slideInLeft`,
|
||||||
@ -41,6 +43,7 @@ export function getTransitionAnimationStyle(type: string, transition: Transition
|
|||||||
switch(transition)
|
switch(transition)
|
||||||
{
|
{
|
||||||
default:
|
default:
|
||||||
|
return {}
|
||||||
case ENTERING:
|
case ENTERING:
|
||||||
return {
|
return {
|
||||||
animationName: `flipInX`,
|
animationName: `flipInX`,
|
||||||
@ -56,6 +59,7 @@ export function getTransitionAnimationStyle(type: string, transition: Transition
|
|||||||
switch(transition)
|
switch(transition)
|
||||||
{
|
{
|
||||||
default:
|
default:
|
||||||
|
return {}
|
||||||
case ENTERING:
|
case ENTERING:
|
||||||
return {
|
return {
|
||||||
animationName: `fadeInUp`,
|
animationName: `fadeInUp`,
|
||||||
@ -71,6 +75,7 @@ export function getTransitionAnimationStyle(type: string, transition: Transition
|
|||||||
switch(transition)
|
switch(transition)
|
||||||
{
|
{
|
||||||
default:
|
default:
|
||||||
|
return {}
|
||||||
case ENTERING:
|
case ENTERING:
|
||||||
return {
|
return {
|
||||||
animationName: `fadeIn`,
|
animationName: `fadeIn`,
|
||||||
@ -86,6 +91,7 @@ export function getTransitionAnimationStyle(type: string, transition: Transition
|
|||||||
switch(transition)
|
switch(transition)
|
||||||
{
|
{
|
||||||
default:
|
default:
|
||||||
|
return {}
|
||||||
case ENTERING:
|
case ENTERING:
|
||||||
return {
|
return {
|
||||||
animationName: `fadeInDown`,
|
animationName: `fadeInDown`,
|
||||||
@ -101,6 +107,7 @@ export function getTransitionAnimationStyle(type: string, transition: Transition
|
|||||||
switch(transition)
|
switch(transition)
|
||||||
{
|
{
|
||||||
default:
|
default:
|
||||||
|
return {}
|
||||||
case ENTERING:
|
case ENTERING:
|
||||||
return {
|
return {
|
||||||
animationName: `headShake`,
|
animationName: `headShake`,
|
||||||
|
@ -8,33 +8,18 @@ export function CurrencyView(props: CurrencyViewProps): JSX.Element
|
|||||||
{
|
{
|
||||||
const { currency = null } = props;
|
const { currency = null } = props;
|
||||||
|
|
||||||
const [ firstRender, setFirstRender ] = useState(true);
|
const [ showUp, setShowUp ] = useState(false);
|
||||||
const [ isAnimating, setIsAnimating ] = useState(false);
|
|
||||||
|
|
||||||
useEffect(() =>
|
useEffect(() =>
|
||||||
{
|
{
|
||||||
if(firstRender)
|
setShowUp(true);
|
||||||
{
|
}, [ currency ])
|
||||||
setFirstRender(false);
|
|
||||||
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setIsAnimating(true);
|
|
||||||
|
|
||||||
const timeout = setTimeout(() => setIsAnimating(false), 305);
|
|
||||||
|
|
||||||
return () =>
|
|
||||||
{
|
|
||||||
clearTimeout(timeout);
|
|
||||||
}
|
|
||||||
}, [ firstRender, currency ]);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ isAnimating }>
|
<TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ showUp }>
|
||||||
<div className="col pe-1 pb-1">
|
<div className="col pe-1 pb-1">
|
||||||
<div className="d-flex bg-primary rounded border overflow-hidden">
|
<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 className="bg-secondary"><CurrencyIcon type={ currency.type } /></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -59,7 +59,7 @@ export function ToolbarView(props: ToolbarViewProps): JSX.Element
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{ <TransitionAnimation className="" type={ TransitionAnimationTypes.FADE_UP } inProp={ expandMeToolbar } timeout={ 300 }>
|
{ <TransitionAnimation className="" type={ TransitionAnimationTypes.FADE_IN } inProp={ expandMeToolbar } timeout={ 300 }>
|
||||||
<ToolbarMeView />
|
<ToolbarMeView />
|
||||||
</TransitionAnimation> }
|
</TransitionAnimation> }
|
||||||
<div className="d-flex nitro-toolbar py-1 px-3">
|
<div className="d-flex nitro-toolbar py-1 px-3">
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
.nitro-toolbar-me {
|
.nitro-toolbar-me {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 10px;
|
bottom: 65px;
|
||||||
left: 15px;
|
left: 15px;
|
||||||
z-index: $toolbar-zindex;
|
z-index: $toolbar-zindex;
|
||||||
background: rgba(20, 20, 20, .95);
|
background: rgba(20, 20, 20, .95);
|
||||||
|
Loading…
Reference in New Issue
Block a user