I write a CSS for my own main div:
.main {
height: 0%;
position: absolute;
width: 100%;
z-index: 100;
background: whitesmoke;
bottom: 0;
border-radius: 15px;
padding: 20px;
color: gray;
left: 0;
right: 0;
transition: height 1s ease-in;
}
.visible {
height: 96%;
}
When some state changes in my own program I would trigger .visible CSS class.
But it not working.
Check my React section:
import React, { useContext } from "react";
import styles from "../../sass/DownModal.module.scss";
import { ConfigContext } from "../../context/config";
import { EnumPageFrom } from "../../bussiness/Icon";
function Index({ children }: { children: React.ReactNode }) {
const { setActiveMenu, setBackground, activeMenu } =
useContext(ConfigContext);
return (
<div
className={`${styles.main} ${
activeMenu == EnumPageFrom.MenuAdd && styles.visible
}`}
>
{children}
</div>
);
}
export default Index;
Every stuff are working properly except CSS (.visible) class!
Why and How can I fit it?
Edit
.visible {
height: 96%;
}
.hidden {
height: 0%;
}
.main {
position: absolute;
width: 100%;
z-index: 100;
background: whitesmoke;
bottom: 0;
border-radius: 15px;
padding: 20px;
color: gray;
left: 0;
right: 0;
transition: height 4s;
}
<div
className={`${styles.main} ${
activeMenu == EnumPageFrom.MenuAdd ? styles.visible : styles.hidden
}`}
>
{children}
I breaking a snipped into some sections but transition still doesnt work.
There are a few potential issues that could be causing the .visible class not to be applied as expected:
Make sure that the activeMenu variable is being set correctly and
that the value of activeMenu is what you expect it to be when you
want the .visible class to be applied. You can check this by adding
a console log to print out the value of activeMenu at different
points in your code.
Make sure that the styles object in your React component contains
the correct class names for the .main and .visible classes. You can
check this by inspecting the styles object in your debugger or by
adding a console log to print out the object.
Make sure that the .visible class is being defined correctly in your
CSS. Make sure that the height property is set to a value that is
greater than 0, and make sure that the transition property is set
correctly. You can try adding a different property (such as color or
font-size) to the .visible class and see if it is applied as
expected to help narrow down the issue.
Related
why animation can be reusable after im changing elemets display property with js
can some one explain i couldnt find any answer for this
can someone explain me this
my codes downbelow
`
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
aside {
display: none;
position: relative;
left: -100%;
height: 100vh;
background-color: red;
width: 20%;
animation: openit 800ms ease-in forwards ;
}
#keyframes openit {
to{
left: 0;
}
}
aside a {
display: block;
}
.open {
position: absolute;
z-index: -1;
}
</style>
`
I found this:
When we want to use transition for display:none to display:block, transition properties do not work. The reason for this is, display:none property is used for removing block and display:block property is used for displaying block. A block cannot be partly displayed. Either it is available or unavailable. That is why the transition property does not work.
form this link. I hope this help.
With create-react-app, I want to implement a simple parallax effect with the help of the npm-package "React Scroll Parallax" with a slowly scrolling background image and a faster scrolling <div> on top. This <div> shall have a "frosted glass"-effect, implemented via CSS "backdrop-filter: blur". I can make the parallax effect work without the backdrop-filter and I can make the backdrop-filter work without the parallax effect. The problem now is: I can't make them work together. I assume the parallax-components brake the correct div-order that is needed for my CSS-approach.
This is my React component "Appbackground.js":
import React from 'react'
import { Parallax } from 'react-scroll-parallax';
class Appbackground extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
return (
<div>
<Parallax speed={-10}>
<div className={'Header'}></div>
</Parallax>
<Parallax speed={10}>
<div className={'Container'}></div>
</Parallax>
</div>
)
}
}
export default Appbackground
This is the relevant part of my "index.css":
.Header {
background: url(./Images/Test.jpg);
min-height: 596px;
}
.Container {
min-height: 2000px;
min-width: 100%;
position: absolute;
top: 100px;
padding: 20px 20px 20px 20px;
background-color: rgba(20, 20, 20, 0.15);
backdrop-filter: blur(12px);
}
.Container:before {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
How can I make it work?
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 extends React.Component {
render() {
return(
<CSSTransition
in = {true}
appear = {true}
classNames = "line-col"
timeout={200}>
<div className = 'line'></div>
</CSSTransition>
);
}
}
And here is the relevant CSS
.line-col-appear{
height: 0%;
width: 2px;
}
.line-col-appear-active{
height: 100%;
width: 2px;
transition: height 200s linear;
}
.line-col-appear-done{
height: 100%;
width: 2px;
}
.line-col-enter{
height: 0%;
width: 2px;
}
.line-col-enter-active{
height: 100%;
width: 2px;
transition: height 2s linear;
}
.line-col-enter-done{
height: 100%;
width: 2px;
}
Any help on resolving this error would be appreciated.
RESOLVED. I had to kill the port and restart the app.
I'm looking for a way to show a small animation around the area where I clicked, for instance, a circle that expands and then diminishes until disappearing. The part which looks easy is creating the animation, which would be a CSS transition, what's hard for me is making something appear right where I clicked (with CSS).
If there's no CSS-based solution I'd like to know how to do it with React, please.
Thanks
You can use CSSTransition from react-transition-group.
A little example for what you're looking for could look like this.
import React from "react";
import "./Style.css";
import { CSSTransition } from "react-transition-group";
export default class Modal extends React.Component {
state = {
animate: false
}
render() {
return (
<React.Fragment>
<CSSTransition
in={this.state.animate}
classNames="animate-circle"
timeout={500}
>
<div
className="circle"
onClick={()=>this.setState({animate: animate ? false : true})}
>
Click to expand and click again to diminish
</div>
</CSSTransition>
</React.Fragment>
)
}
}
And Style.css should've code something like this
.circle {
width: 300px;
height: 300px;
border-radius: 50%;
background-color: red;
}
.animate-circle-enter-active {
width: 500px;
height: 500px;
transition: all 500ms infinite;
}
.animate-circle-enter-done {
width: 500px;
height: 500px;
}
.animate-circle-exit {
width: 500px;
height: 500px;
}
.animate-circle-exit-active {
width: 0px;
height: 0px;
transition: all 500ms infinite;
}
.animate-circle-exit-done {
width: 0px;
height: 0px;
}
CSS button click animations use the :active pseudo class. The button itself should have a transition, and the static design. The button:active should have the active design (the moment before the animation starts) with transition: 0s;. The transition: 0s; rule is important because it makes the button move to the active design immediately (without animation).
Whenever the button is clicked, it becomes active, and moves straight to the active design state. When the button is released, the transition between the active and the static states creates the effect.
body {
padding: 5em;
}
button {
position: relative;
font-size: 1.5em;
padding: 0.5em 1em;
border: none;
outline: none;
}
button::before {
position: absolute;
z-index: -1;
top: -1em;
right: -1em;
left: -1em;
bottom: -1em;
background: radial-gradient(transparent 0, gold 100%);
opacity: 0;
content: '';
transition: all 0.3s;
}
button:active::before {
top: 0;
right: 0;
left: 0;
bottom: 0;
opacity: 1;
transition: 0s;
}
<button>Click</button>
I made modal in React and it's working fine, but I really want to add one small feature. When I'm clicking on button, class of modal is changing and modal is becoming visible, but this happens immediately and I want to add some transition.
My code:
In parent method toggling class and passing props:
toggleModal() {
this.setState({ visibleModal: !this.state.visibleModal });
}
<RegisterModal
visible={this.state.visibleModal}
toggleModal={this.toggleModal}
/>
Children component:
<div className={`modal ${props.visible ? 'modal--visible' : 'modal--invisible'}`}>
My CSS:
.modal {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
justify-content: center;
}
.modal--invisible {
display: none;
}
.modal--visible {
display: flex;
}
Can someone help me?
Possibly related
The display property can't change smoothly, it only has fixed values. It jumps instantly from one to the next. You need to use transition and something like opacity to get a nice fade in.
.modal {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
justify-content: center;
transition: opacity .5s; /* Opacity will fade smoothly */
}
.modal--invisible {
opacity: 0;
pointer-events: none; /* Makes the modal unclickable */
}
.modal--visible {
opacity: 1; /* Modal is visible */
pointer-events: initial; /* Modal is clickable */
}