Animate transition on a react component that i hide on re-render

Asked
Active3 hr before
Viewed126 times

10 Answers

rendercomponentreact
90%

Can I avoid informal personal interactions at companies that offer free lunch? ,i m using reactjs and i have a datepicker component that i hide when the user clicks outside of the component element.,Connect and share knowledge within a single location that is structured and easy to search.

.Modal {
   position: fixed;
   top: 30 % ;
   left: 25 % ;
   transition: all 0.3 s ease - out;
}
.ModalOpen {
   animation: openModal 0.4 s ease - out forwards;
}
.ModalClosed {
   animation: closeModal 0.4 s ease - out forwards;
}

@keyframes openModal {
   0 % {
      transform: translateY(-100 % );
   }
   100 % {
      transform: translateY(0);
   }
}

@keyframes closeModal {
   0 % {
      transform: translateY(0);
   }
   100 % {
      transform: translateY(-100 % );
   }
}
const modal = ({ 
  isShown, isMounted, 
  initiateUnmountAction, unmountAction
}) => {
  const cssClasses = [
    "Modal",
    props.isShown ? "ModalOpen" : "ModalClosed"
  ];
  return (
    <Fragment>
      {isMounted && <div className={cssClasses.join(' ')}
        onAnimationEnd={event => 
          {event.animationName == "closeModal" && unmountAction}
      }>
        <h1>A Modal</h1>
        <button className="Button" onClick={initiateUnmountAction}>
          Dismiss
      </button>
      </div>}
    </Fragment>

  );
};
load more v
88%

ReactCSSTransitionGroup is a high-level API based on ReactTransitionGroup and is an easy way to perform CSS transitions and animations when a React component enters or leaves the DOM. It’s inspired by the excellent ng-animate library.,The ReactTransitionGroup add-on component is a low-level API for animation, and ReactCSSTransitionGroup is an add-on component for easily implementing basic CSS animations and transitions.,When using ReactCSSTransitionGroup, there’s no way for your components to be notified when a transition has ended or to perform any more complex logic around animation. If you want more fine-grained control, you can use the lower-level ReactTransitionGroup API which provides the hooks you need to do custom transitions.

import ReactCSSTransitionGroup from 'react-transition-group'; // ES6
var ReactCSSTransitionGroup = require('react-transition-group'); // ES5 with npm
load more v
72%

While both react-transition-group and react-router-dom are great and handy packages for their intended uses, mixing them together can break their functionality.,the is in a parent component,First, let’s get familiar with the react-transition-group library to examine how we can use it for elements entering and leaving the DOM.

Hello I was following this tutorial and it is very helpful, unfortunately I have run into an issue and having difficulty getting passed, it, my application right now has to support some legacy urls that get handled via redirects. and every time a redirect happens I get a warning ‘Warning: You tried to redirect to the same route you’re currently on:’ here is some sample code

const Routes = () => (
    <Route render={(location) => {
        return (
            <TransitionGroup>
                <Transition
                    appear={true}
                    onEnter={(node, appears) => play(node, appears)}
                    onExit={(node) => exit(node)}
                    timeout={{enter: 300, exit: 0}}
                    key={location.location.key}
                >
                    <Switch location={location.location}> {/* Switch, Renders first <Route> or <Redirect> that matches the location. */}
                        <Route
                            component={MyComponent}
                            path={PATH_MYCOMPONENT}
                        />
                        <Redirect key={location.key} to={{ pathname: PATH_MYCOMPONENT, search: location.search }} />
                    </Switch>
                </Transition>
            </TransitionGroup>
            )
        }}
    />
);
65%

If you’re using CSS transitions or animations, the CSSTransition component is what you’ll want to use; it’s built upon the Transition component, so it inherits all of its props.,It’s worth noting this is a platform-agnostic base component — if you’re looking for CSS transitions (like I was for my use case), you’ll probably want the CSSTransition component instead.,The CSS here is really concerned with the CSSTransition component wrapped inside of SwitchTransition, but I figure the more sample code you see for how to animate things in and out of the DOM, the better.

Pretag
 Pretag team - issue, fix, solve, resolve
75%

once we achieve the desired animation, we’ll refactor a reusable animation component,But with React Hooks, we can just compose the HOC (functional programming approach).,But animate.css animates opacity and other CSS properties; you can’t do a CSS transition on the display property. So an invisible object remains and it takes up space in the document flow.

Pretag
 Pretag team - issue, fix, solve, resolve
40%

Without if statements in JSX, how do you control your application's flow? Let's explore how to render or NOT render elements in React.,In the example below, the nav element is off the left side of the screen with left: -200px, but when the class open is added to the nav element, it transitions to having left: 0px, and suddenly it is visible again.,We can toggle this CSS class using state that is toggled within the onClick of a button (the hamburger), choosing to add a class or not with a ternary condition className={open ? "open" : null}.

Because this if statement is not embedded inside of JSX but is just part of the regular JavaScript portion of the function, you are free to use any sort of JS construct that you like. In this example, if the product is not available, we're just going to return null.

const AddToCart = ({ available }) => {
  if (!available) return null;

  return (
    <div className="full tr">
      <button className="product--cart-button">Add to Cart</button>
    </div>
  );
};
load more v
22%

In my previous post, I introduced the <AnimatePresence/> component. It triggers the exit prop animations from all its children when they're removed from React's render tree. Basically, it detects when a component unmounts and animates this process. ,First, let's introduce a new transition property called when. It defines 'when' should an element carry out its animation. We want our black box to disappear when all children are done rendering hence afterChildren: ,And now the components can unmount!

// pages/_app.js

import { AnimatePresence } from "framer-motion";
import "../styles/index.css";

function MyApp({ Component, pageProps, router }) {
  return (
    <AnimatePresence>
      <Component key={router.route} {...pageProps} />
    </AnimatePresence>
  );
}

export default MyApp;
load more v
60%

We can achieve the same effect in a stateless functional component using CSS transitions.,example-enter : defines the beginning state of the enter transition,Problems with CSS Transitions

Pretag
 Pretag team - issue, fix, solve, resolve
48%

To better support server rendering Material-UI provides a style property to the children of some transition components (Fade, Grow, Zoom, Slide). The style property must be applied to the DOM for the animation to work as expected.,The second example demonstrates how to change the transform-origin, and conditionally applies the timeout property to change the entry speed.,Material-UI provides a number of transitions that can be used to introduce some basic motion to your applications components.

To better support server rendering Material-UI provides a style property to the children of some transition components (Fade, Grow, Zoom, Slide). The style property must be applied to the DOM for the animation to work as expected.

// The `props` object contains a `style` property.
// You need to provide it to the `div` element as shown here.
function MyComponent(props) {
  return (
    <div {...props}>
      Fade
    </div>
  );
}

export default Main() {
  return (
    <Fade>
      <MyComponent />
    </Fade>
  );
}
load more v
23%

Typically, to have a component either shown or hidden, depending on some state variable, we use expressions like this:,Instead of conditionally rendering, we can pass a visible=true/false prop to Fade, and let it animate its children on both appearance and disappearance. The Fade component itself can be rendered at all times:,But then, how does everyone have that? And not just everyone, but how can you make something like this?

{showRectView && <RectView />}
load more v

Other "render-component" queries related to "Animate transition on a react component that i hide on re-render"