We Keep Coding

The correct styling is applied despite the targeting are different in JSX and CSS files

Currently I have the following code:
FormInput.jsx:
import './FormInput.scss';
const FormInput = ({ label, ...otherProps} ) => {
const { value } = otherProps;
return (
<div className="group">
<input className="formInput" {...otherProps} />
{label && (
<label
className={`${value.length ? 'shrink' : ''} formInput-label`}
>{label}</label>
)}
</div>
)
};
export default FormInput;
In FormInput.scss:
.formInput-label {
transition: 300ms ease all;
position: absolute;
font-size: 18px;
left: 5px;
top: 10px;
&.shrink {
top: -14px;
}
}
What I'm confused about is that the targeted class of the label in FormInput.jsx should compile to:
.shrink .formInput-label
But the one in the SASS file will compile to:
.formInput-label.shrink
My question is how does the correct styling still get applied if the class targeting in the JSX and SASS files aren't the same? The JSX has the classes in reverse order and a space in between.

The class attribute (or className in JSX) defines a list of classes. The syntax for classes is different in HTML and in CSS, but the order of classes on the same element does not matter in either.
JSX renders to HTML, so it renders as class="shrink formInput-label", which defines the list of classes ["shrink", "formInput-label"] and is compatible with the CSS selector .shrink.formInput-label.
Also, a CSS selector such as .shrink would match the element as well (just with a lower specifity rating), because it matches one of the classes in the list.

dropdownClassName datepicker to disable animation or transition

is there a way to disable dialog animation of RangePicker or DatePicker in antd?
https://codesandbox.io/s/antd-datepicker-forked-129d43?file=/src/App.js:581-615
<RangePicker open={open} />
I would like the dialog to open instantly
I tried to add
<RangePicker open={open} dropdownClassName="something" />
and apply transition: none; and animation: 0; it doesn't work

just apply this
.ant-calendar-picker-container {
animation:none !important;
}
https://codesandbox.io/s/antd-datepicker-forked-n6vtsv

Can't animate modal on ReactJS

I'm currently creating my custom implementation of a modal. All works perfectly fine so far but I can't seem to animate it and I can't get my head around it.
This is my Modal component
import React from 'react'
import Slider from './Slider'
import {IoIosCloseCircleOutline} from "react-icons/io"
import styled from "styled-components";
export default function Modal(props) {
const Modal = styled.div `
transform: translateX(${({animateSlideInRight}) => (animateSlideInRight ? "0" : "100vw")});
transition: transform 1s;
width: 1000px;
height: 650px;
z-index: 100;
position: fixed;
background: white;
transition: all 1.1s ease-out;
box-shadow:
-2rem 2rem 2rem rgba(black, 0.2);
visibility: visible;
display: flex;
border-bottom-right-radius: 100px;
`
const closeModal = () => {
props.setShow(false)
}
const data = props.data
if (!props.show) {
return null
}
return (
<div className="modalWrapper">
<Modal className="modal" id="modal" animateSlideInRight = {props.show}>
<div className="modalHeaderWrapper">
<IoIosCloseCircleOutline className="modalCloseCross" onClick={closeModal}/>
<img src={data[0].logo} alt="logo" />
<h2>{data[0].title}</h2>
</div>
<div className="modalRightFlex">
<Slider
images={[data[0].image1Carrousel, data[0].image2Carrousel, data[0].image3Carrousel]}
/>
<div className="modalRightDescription">
<h1>Description</h1>
<p>{data[0].description}</p>
<h1>Technologies</h1>
<div className="modalTechnologiesWrapper">
{data[0].technologiesUsed.map((image) => {
return <img src={image}/>
})}
</div>
</div>
</div>
</Modal>
</div>
)
}
As you see my modal is a styledComponent that defines whether to translate in X or not depending on the show state. In my scenario I had to lift up state since I'm opening this modal from clicking on a card which in itself is a different component, so their ancestor is taking care of the states.
My current CSS for modal is as seen in the styled div.
Things I have tried
1-tried having a regular div and handle the animation through CSS with keyframes --> It works for sliding in but it doesn't when I close (in that instance I had my show state defining a class name for the modal with a different animation for each of them)
2-tried to set a animate state and define the className based on whether that state is true or false. It works the first time when I close (despite having to introduce a timeout of the animation duration between setting animate to false and show to false) but then it goes bonkers and starts flickering everywhere.
Anyway someone can see the issue? Many thanks
edit
Sanbox link: https://codesandbox.io/s/trusting-shape-vxujw

You should define Modal in the outer scope of the component rendering it, the animation does not complete and you resetting it by redefining it on the next render.
Also resetting an animation should be done with none instead of giving an actual length.
Moreover, there might be more CSS bugs related that can hide your modal animation like z-index and position, if your question is focused on an animation problem you should remove all the noise around it.
See working example:
const Animation = styled.div`
transform: ${({ animate }) => (animate ? "none" : "translateX(500px)")};
transition: transform 1s;
`;
function Modal(props) {
return <Animation animate={props.show}>hello</Animation>;
}
function Component() {
const [show, toggle] = useReducer((p) => !p, false);
return (
<>
<Modal show={show} />
<button onClick={toggle}>show</button>
</>
);
}
Also, you shouldn't return null when you don't want to animate, you will lose the close animation.
// remove this code
if (!props.show) {
return null;
}

Fading a component in and fading another one out React.js

I just recently started getting into using React.js and to make it easier for myself I'm trying to recreate projects I've made in the past, but instead of using jQuery like I did in the past I'm completely avoiding jQuery and using only React.
I tend to do animations where a div would fade in as another fades out like this:
$("#start").click(function() {
$("#h1").fadeOut(750);
$("#h2").delay(500).fadeIn(750);
$("#h1").css("z-index", 0);
$("#h2").css("z-index", 1);
});
I was wondering how can I reproduce this fade in and out effect without jQuery
(I know CSS animations could change the opacity, but the opacity isn't the only thing I'm trying to change, this affects the display property as well).

A simple way is to use CSS transitions. Basically you just add a class to an element, and define a transition in the CSS and it does the rest for you
There is a tutorial here
https://www.w3schools.com/css/css3_transitions.asp
Which does a good job of explaining how it all works with examples and a playground for you to try your own

The CSS Transition group add-on might help, it let's you define transitions like this:
JS:
<ReactCSSTransitionGroup
transitionName="example"
transitionEnterTimeout={500}
transitionLeaveTimeout={300}>
{items}
</ReactCSSTransitionGroup>
CSS:
.example-enter {
opacity: 0.01;
}
.example-enter.example-enter-active {
opacity: 1;
transition: opacity 500ms ease-in;
}
.example-leave {
opacity: 1;
}
.example-leave.example-leave-active {
opacity: 0.01;
transition: opacity 300ms ease-in;
}

One option would be to use a framework, like react-bootstrap, which includes a lot of the UI components you need for any given project. It includes a Fade component. Documentation can be found here: https://react-bootstrap.github.io/components.html#utilities
class Example extends React.Component {
constructor(...args) {
super(...args);
this.state = {};
}
render() {
return (
<div>
<Button onClick={()=> this.setState({ open: !this.state.open })}>
click
</Button>
<Fade in={this.state.open}>
<div>
<Well>
THIS CONTENT WILL FADE
</Well>
</div>
</Fade>
</div>
);
}
}
ReactDOM.render(<Example/>, mountNode);

Can't trigger transition by toggling classes with jQuery

I want to make a simple transition but struggle doing it with jQuery.
I create the element that is to be transformed in JS in an eventListener like so:
const searchHint = `
<h3 id="search_hint" class="invizible">
Enter a search term to continue!
</h3>
`
$('#search_label').append(searchHint)
$('#search_hint').removeClass('invizible').addClass('make_vizible')
In my stylesheet I've got those styles for the classes 'invizible' and 'make_vizible':
#search_hint.invizible {
color: white;
transition: color 1s ease;
}
#search_hint.make_vizible {
color: #404040;
}
As I understand, this should result in the search hint element slowly fading in. I create it with the invizible class, where a transition attribute is present and also a start value for the attribute to be transformed. Then I switch the classes, to a class with a different color value.
What happens, is that the element is just displayed, not animated.
Any ideas?

There are two issues:
The transition property is set in invizible class. So once you remove it, that property is not applicable. To resolve this, associate the transition to the element id.
The removeClass and addClass are probably getting applied to the same frame that appends #search_hint while rendering. To mitigate this you could wait for the frame to render, and then add/remove the class. I've done this using setTimeout with timeout value zero.
const searchHint = `
<h3 id="search_hint" class="invizible">
Enter a search term to continue!
</h3>
`;
$('#search_label').append(searchHint);
setTimeout(function() {
$('#search_hint').removeClass('invizible').addClass('make_vizible');
},0);
#search_hint {
color: white;
transition: color 1s ease;
}
#search_hint.invizible {
color: white;
}
#search_hint.make_vizible {
color: #404040;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="search_label">
</div>