Questions tagged [reactcsstransitiongroup]

Related to React library transitions

Filter by
Sorted by
Tagged with
0votes
1answer
22views

smooth animation of the size of a functional component during state change

As you can see, by clicking on the component underneath, we can change its size. I would like to make a transition between those sizes. Is it possible with CSSTransition ? export const Liste_planete2 =...
user avatar
  • 191
0votes
0answers
18views

Using React-Transition-Group, how can I create a sliding wizard?

I'm having a bit of trouble with React-Transition-Group, it's been a couple of years since I last had to work with it. Right now I'm working on a wizard widget for our group's app, basically asking ...
user avatar
0votes
1answer
21views

Animate container first, child second, with CSSTransition

With CSSTransition, I would like to animate my container div first, then, with a delay, animate its child div. I failed so far: they always animate at the same time, no matter the transition-delay set ...
user avatar
1vote
1answer
24views

CSSTransition is not triggered

Sandbox: https://codesandbox.io/s/practical-mountain-cjrte?file=/src/App.js I'm trying to use CSSTransition from react-transition-group, for the first time, and it does not work :( When I click on my ...
user avatar
0votes
0answers
28views

How do I use React's CSSTransitionGroup to slide-in/out my modal content?

I'm trying to build a multistep modal component which allows users to slide between each step in the modal. So far I've been able to get sliding to next steps working, but going to the previous slide ...
user avatar
0votes
0answers
29views

How can I animate flex-basis of a column with content in React?

I am very close to getting this working the way I want, but there is a glitch in the UI as it stands. I have a 3 column flex layout. When a user in the list is clicked, I want to slide in the panel ...
user avatar
0votes
0answers
8views

ReactCSSTransitionGroup causing dynamic input field to be un-clickable

I am trying to use ReactCSSTransitionGroup to animate a slide-in/slide-out effect of a series of modals. The input fields of the modal are driven by a configuration and dynamically rendered depending ...
user avatar
  • 8,045
0votes
0answers
12views

Using ReactCSSTransitionGroup to add transitions to individual components created with React.createElement

I am trying to add some transitions to components on a page that are generated from React.createElement. These components are currently being stored in Redux state and swapped out when users interact ...
user avatar
  • 8,045
1vote
1answer
441views

I cannot get React Transition Group to work. No enter or leave transitions

Hi I cannot get React Transition Group working at all. Can anyone take a look at this and see why it will not work? The links pull in the components correctly but there are no transitions. No ...
user avatar
  • 153
0votes
0answers
18views

Is there a way to dynamically set className with css module? To be used with CSSTransition library

So I'm trying to use the CSSTransition library in addition to React CSS Module and was wondering if it was possible to dynamically create the className to abstract the transitional classes into a hook....
user avatar
0votes
0answers
81views

How to animate Reach Router Redirect with react-transition-group

My App component looks like this: <TransitionGroup className={s.group}> <CSSTransition key={location.key} timeout={150} classNames={classNames}> <Router location={location} ...
user avatar
0votes
0answers
15views

ReactJS Transitions are not working with classes or modules. Any tip

My CSS Modules's in my React app aren't working as I'd expect them to. /* CSSTransition classes */ .menu-primary-enter { position: absolute; transform: translateX(-110%); } .menu-primary-...
user avatar
2votes
1answer
169views

In React, how can I apply a CSS transition on state change, re-mount, or re-render?

Say I have a React functional component with some simple state: import React, { useState } from 'react' import { makeStyles } from "@material-ui/core" export default function Basket() { ...
user avatar
  • 1,837
0votes
0answers
40views

How to add CSS exit animation in React? (Without any third party library/package)

I have a div which appears like this: <div key={'active_bios_' + element.id}> <p onClick={() => dispatch(...
user avatar
  • 1,677
0votes
0answers
11views

Gliding style changes in React JS

I have a simple component whose motion I am controlling using absolute positioning and top/left values as shown below: <div key={element.id + index} className={classes.catController}...
user avatar
  • 1,677
0votes
0answers
22views

Adding transition to route in reactjs

Im trying to add transitions between my routes. But cant figure it out. Tried some examples but none of them are working. Here my code ; import { TransitionGroup, CSSTransition } from 'react-...
user avatar
  • 241
0votes
0answers
144views

Disable the TransitionGroup animation CSSTransition from React Router

I'm being stuck for two days trying to disable the animation coming from the Router this is the code: const App = (): JSX.Element => { const effectClasses = (pathe: string) => { if (...
user avatar
3votes
3answers
582views

CSSTransition to make a slide out drawer in css grid layout

I am trying to make a slide out drawer utilizing the npm package react-transition-group. For whatever reason, I cannot seem to get the drawer to slide out from left to right on clicking the additional ...
user avatar
  • 558
0votes
1answer
31views

Is it true that for 0.3 or 0.6 seconds of sliding a panel away using React / Redux, we'd already have to dispatch two actions to handle it?

If a React panel is somewhat computation heavy during the rendering, and we'd like to make it disappear when the main page is also rendering something, it would speed up the page update by sliding the ...
user avatar
0votes
1answer
27views

Can't switch back to 'main' menu from React's CSSTransitions

Basically I have a sidebar activated with hover which has submenus activated with react-transition-group CSSTransition element. I'm able to access the submenu from the buttons but when I click on the ...
user avatar
  • 43
1vote
0answers
26views

TransitionGroup component laggs on exit-active

I am implementing a slider for components rendered by the router. Created a component with TransitionGroup to automate appending of the classes by CSSTransition, and the code can be seen in a sandbox ...
user avatar
  • 538
0votes
1answer
137views

React Popper and React CSStransition

I am building a React project. Within the projekt I am using React Popper 2 for dropdown menus. Great for auto positioning the dropdown menu when you are near the edges of the web browser, etc. I am ...
user avatar
  • 137
0votes
0answers
37views

React Router CSSTransition

It is kind of hard to understand the CSSTransition. <Container className="relative"> <TransitionGroup className="transition-group"> <CSSTransition key={...
user avatar
0votes
1answer
35views

CSSTransition react: Only backdrop shown and photo not being displayed

I have a component that gets rendered when a photo is clicked with CSSTransition. It also has a Backdrop component but upon click only the backdrop gets shown. If I remove CSSTransition then it ...
user avatar
4votes
0answers
1kviews

React Router v6.0.0-beta0 - Animating route transitions with TransitionGroup and CSSTransition

My app has two routes: Step1 and Step2 and a Next button that takes you from Step1 to Step2. I would like to animate the transition between Step1 and Step2 so that when the user clicks Next, Step2 ...
user avatar
  • 1,242
0votes
1answer
112views

CSSTransition component's callbacks are not called in Cypress testing environment

I've been using this React CSSTransition component: http://reactcommunity.org/react-transition-group/css-transition I'm adding Cypress tests. CSSTransition callbacks such as onExited and onEntered ...
user avatar
2votes
1answer
857views

CSSTransition from react-transition-group not applying classes

I'm trying to integrate CSSTransition to my Gatsby site, but it is not applying any of the classes. I'm utilizing CSS modules, and I've got a <div> that serves as the parent that fades in and ...
user avatar
1vote
0answers
22views

React "router-like" animations

I have a sidebar sliding menu that should act like a Router with transitions, but based on my app's state (redux) instead of routes. The first time the menu is opened the transitions works fine. But, ...
user avatar
  • 4,598
1vote
0answers
86views

React Warning: findDOMNode is deprecated in StrictMode

I´m trying to use CSSTransition group but receiving the warning 'Warning: findDOMNode is deprecated in StrictMode.'. I´ve been seraching for different threads on internet but non of them useful, or at ...
user avatar
  • 13
0votes
1answer
2kviews

CSSTransition nodeRef for component with direct children

I want to get rid of the warning on StrictMode for findDOMNode when using react-transition-group but I stumbled upon an issue. My <Slide> component looks like this: class Slide extends React....
user avatar
0votes
0answers
47views

how to remove CSSTransition when widow resize

import {CSSTransition} from "react-transition-group"; <CSSTransition in={focused} timeout={200} classNames="slide"> <NavSearch className={...
user avatar
0votes
2answers
2kviews

How do I use React's CSSTransitionGroup to fade-in/out my alert message?

I'm trying to build a React 16.13.0 Flash component, that I would like to fade-in and fade-out an alert message (for instance, to tell the user something has saved successfully). I'm using the ...
user avatar
  • 16k
0votes
0answers
519views

Error: Failed prop type: Invalid prop `children` supplied to `CSSTransition`

Can anyone help me to solve this problem with React CSSTransition? The error in the console says: Error: Failed prop type: Invalid prop children supplied to CSSTransition. My code is in the App ...
user avatar
1vote
0answers
40views

React:Using Call-back functions to coordinate animations

I am new to React and I want to see if my design logic is correct. I wish to animate a grid. A grid is composed of lines. Therefore, I have defined a <Grid /> component and a child component <...
user avatar
0votes
1answer
129views

CSSTransition: Error: Element type is invalid: expected a string (for built-in components) or a

I am trying to implement a simple CSS transition using React's CSSTransition. I simply want to animate a thin line going straight across the screen. Here is the following code. Grid.js class Gridline ...
user avatar
2votes
2answers
2kviews

React: How could I add a fade out animation on delete on dynamically generated table entries?

For several days I have been trying to figure out how to add a fade out animation on dynamically generated table in React, but I had no luck in it yet. Seems like every approach I try has some ...
user avatar
0votes
1answer
56views

How to set css transition property on react element with state content?

I am trying to apply transition property on the element which gets its content from state. On every state change I want to apply css transition property on the element's opacity. Below is my render ...
user avatar
2votes
1answer
113views

React CSSTransition when you change page by Route

I'm using CSSTransition and it works amazing with components: <CSSTransition timeout={330} in={state.isPopupOpen} classNames="popup" unmountOnExit> <MyComponent /> </CSSTransition&...
user avatar
2votes
0answers
84views

reactjs: how to use TransitionGroup&CSSTransition with a redirect on login

I'm using Laravel & Reactjs with the react-router-dom. I have made a Reactjs login page that redirects the user to the dashboard home page but it doesn't use the csstransition animation. In the ...
user avatar
0votes
1answer
404views

React Transition Between Conditionally Rendered Components

I'm trying to transition between 3 conditionally rendered components when I click on them. I'm trying to achieve this by using TransitionGroup from the react-transition-group. This is what I have so ...
user avatar
1vote
1answer
913views

React animate fade-in and fade-out with CSSTransitionGroup on conditionally rendered component

I have a card component that conditionally renders a check icon when this.state.isSelected is true. I want to animate the check icon when it renders. I also want to animate it when it leaves. I have ...
user avatar
0votes
1answer
592views

Not able to create a smooth scroll with CSSTransition Group

I am trying to use CSSTransitionGroup (or ReactTransitionGroup) to create a vertical smooth scroll effect for content as it appears and disappears from the dom. I am aware of ways to animate such an ...
user avatar
  • 2,390
0votes
1answer
22views

Component for TransitionGroup

I'm trying to create a reuseable component for <TransitionGroup> but not sure where to place the {children}. import React from 'react'; import { CSSTransition, TransitionGroup } from 'react-...
user avatar
  • 22.2k
4votes
1answer
1kviews

React CSSTransition not animating

I want to animate a box (fade-in, fade-out) in my web app. I am using react-transition-group for this. But somehow, the animation is not working. Code import React from 'react'; import ReactDOM from '...
user avatar
  • 4,265
1vote
3answers
487views

React 404 page not working with CSSTransition

I need to apply a 404 error page to ReactJs with CSSTransition. This is working fine when I using it with react-router-dom Switch. But, I need to implement CSSTransition with React Router. Idea from ...
user avatar
6votes
0answers
166views

React transitions not happening on on this.props.dispatch(push(path))

I am using a react transition to fade in and fade out content. Mostly this is working fine, however I am noticing that one page is rendering instantly, without going through the transition state. My ...
user avatar
0votes
1answer
1kviews

React router and full page overlay transitions

I have a simple application setup so far uses react router and an external API. I have some post archives of different types and when a user requests a detail page the API makes a request, and if it ...
user avatar
0votes
1answer
54views

ReactJS - CSSTransition - div dissapears after timeout

I'm rewriting my old page from PHP to ReactJS. I have problem with hiding and showing divs. I want my div ".tooltip" to show after I click ".tooltip-act" Previously I had it done with jQuery but I ...
user avatar
  • 65
1vote
1answer
5kviews

How to get one elements to slide in while the other slides out, using react and material-ui?

I have two elements in react, wrapped in a slide: <div className={classes.wrapper}> <Switch checked={checked} onChange={this.handleChange} aria-label="...
user avatar
1vote
1answer
104views

Notify child components of transition state in TransitionGroup

I'm using the TransitionGroup component to provide a page-transition effect that swaps an existing component out for a new one as the user moves through a journey-like interface. const { stepId, ...
user avatar
  • 36.9k

15 30 50 per page
1
2 3 4 5