2

I'am in trouble with nextjs + react-animation-group, I'have follow the docs to implement but doesn't work, i need to animate a component from opacity 0 to 1 in 2.5 sec. here my test:

https://codesandbox.io/s/transition-group-u5htd

you can see that "Animation div" appear instantly instead with opacity transition, any ideas how to solve?

Thx all

DaveIt
  • 799
  • 1
  • 8
  • 15

2 Answers2

4

Try This :-

pages/_app.js

export default function MyApp({ Component, pageProps, router }) {
  return (
    <SwitchTransition mode='out-in'>
      <CSSTransition key={router.pathname} classNames='page' timeout={300}>
        <Component {...pageProps} />
      </CSSTransition>
    </SwitchTransition>
  );
}

global.css

.page-enter {
  opacity: 0;
  transform: scale(1.1);
}
.page-enter-active {
  opacity: 1;
  transform: scale(1);
  transition: opacity 300ms, transform 300ms;
}
.page-exit {
  opacity: 1;
  transform: scale(1);
}

.page-exit-active {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 300ms, transform 300ms;
}```
A29sTech
  • 56
  • 2
2

You need appear={true} on your CSSTransition tag and add css for appear active. And I think instead of writting css in <style jsx global> tag, you should define a new css file and import it

.div-appear {
  opacity: 0.01;
}
.div-appear-active {
  opacity: 1;
  transition: all 10000ms ease-out;
}

you can check here CodeSandBox, hope it helps you :)

iamhuynq
  • 5,357
  • 1
  • 13
  • 36
  • Hi iamhuynq, could you please clarify why `appear={true}` was needed? My `classNames` currently don't get added unless I include the appear prop. – daniel blythe Apr 23 '20 at 14:54