CODEWITHSUNDEEP
javascriptcssreactjs
Saddex
Saddex

Reputation: 145

React ignoring css transitions?

I am currently watching a course on React on Udemy. I decided to follow along however using styled-components instead of CSS modules, primarily because I did not get the first one to work properly. The first one is mostly working fine. However, it's ignoring my CSS transition.

import React from 'react';
import styled from 'styled-components';

const modal = (props) => {
    const ModalDiv = styled.div`
    position: fixed;
    z-index: 500;
    background-color: white;
    width: 70%;
    border: 1px solid #ccc;
    box-shadow: 1px 1px 1px black;
    padding: 16px;
    left: 15%;
    top: 30%;
    box-sizing: border-box;
    transition: all 0.4s ease;
    @media (min-width: 600px) {
        width: 500px;
        left: calc(50% - 250px);
    }
    `;
    return (
        <ModalDiv
        style={{transform: props.show ? 'translateY(0)' : 'translateY(-100vh)',
        opacity: props.show ? '1': '0'}}>
            {props.children}
        </ModalDiv>
    );
}

export default modal;

The inline-style was used in the course and worked there with the transition but not here. I also tried moving the transition line to the inline-CSS, didn't work either. Did a Google search before and I have a feeling it has something to do with the component re-rendering, but I am not sure. It only works when I am manually adjusting the properties in the inspector. What could be wrong?

Upvotes: 0

Views: 754

Answers (1)

Saddex
Saddex

Reputation: 145

This question was solved long ago by myself and the problem happened because unlike in the course, I used Styled Components as seen above, and defined the styled component inside the React functional component instead of outside. This causes the styled component to be redefined on every re-render of course. This was discovered because forms also became almost unusable due to focus being lost every time a change was made. Define your styled components outside the React functional component body/outside the render function of a class components kids.

Upvotes: 2

Related Questions