Is there a way that I could slide out my modal which slides in?I've written a code that makes the modal slide in from left to right and I cant figure out how to slide out the modal. Can anyone help me with this? When the user clicks on the x button, the modal should slide out from right to left.
Thanks in advance!!
.headerContactModal {
background-color: white;
color: #1a66b1;
margin-left: 15px;
height:70px;
width:100%;
padding-top: 20px;
font-weight: 700;
}
.headerContactModalMessage {
padding-left: 20px;
padding-right: 5px;
}
.headerContactModalExit{
z-index: 999;
float: right;
display: inline;
color: $dark_gray;
position: absolute;
top: 5px;
}
.headerContactModalPhone {
font-size: 18px;
padding-right: 10px;
}
.slidein {
animation-duration: 700ms;
animation-name: slidein;
animation-iteration-count: 1;
animation-direction: alternate;
}
#keyframes slidein {
from {
margin-left:100%;
}
to {
margin-left:0%;
}
}
import React, { PropTypes, Component } from 'react';
import classNames from 'classnames';
import Button from '../../../common_ui/leafs/Button';
import GenericTextField from '../../components/GenericTextField';
import Icon from '../../../common_ui/leafs/Icon';
class HeaderContactModal extends Component {
static propTypes = {
phoneNumber: PropTypes.string,
messageText: PropTypes.string
}
static defaultProps = {
phoneNumber: '1-800-CALLUS',
messageText: 'Call us:'
}
render() {
return (
<div className="headerContactModal slidein">
<span className="headerContactModalMessage">{this.props.messageText}</span>
<span className="headerContactModalPhone">{this.props.phoneNumber}</span>
<span onClick={this.props.contractContactUs}><Icon className="fa-close headerContactModalExit"/></span>
</div>
);
}
}
export default HeaderContactModal;
What you're looking for is ReactCSSTransitionGroup. Simple addon to react to handle transition animations when moving between states (such as open/closed on your modal).
Related
I have a HeaverNav component, a pretty simple fixed position header. When the user scrolls past a certain dimension a class is added that just adds a border-bottom to the existing class. Applying an animation for the border to enter is simple enough with a
transition: all 300ms ease; But having the border animate out when the class is no longer active is tricky. Currently the border just flips off suddenly with no smoothness, how can I achieve the effect of the border animating out smoothly?
MY CODE
import React, { useEffect, useState } from 'react';
import navStyles from '../styles/nav-header.module.scss';
import { MdOutlineAddBox } from 'react-icons/md';
import { RiHeartLine } from 'react-icons/ri';
import { FiSend } from 'react-icons/fi';
const NavHeader = () => {
const [isScrolling, setIsScrolling] = useState(false);
console.log(isScrolling)
useEffect(() => {
if (typeof window !== "undefined") {
window.addEventListener("scroll", () =>
setIsScrolling(window.pageYOffset > 100)
);
}
}, []);
return (
<nav className={isScrolling ? `${navStyles.nav} ${navStyles.navIsScrolling}` : `${navStyles.nav}`}>
<h1>Instagram</h1>
<ul>
<li><MdOutlineAddBox /></li>
<li><RiHeartLine /></li>
<li><FiSend /></li>
</ul>
</nav>
)
}
export default NavHeader;
SCSS
#import "../styles/global.scss";
#font-face {
font-family: "Instagram";
src: url("../assets/instagram-font.otf") format("woff2");
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
position: fixed;
width: 100%;
padding: 0.8rem;
background-color: $color-black;
h1 {
font-family: "Instagram", sans-serif;
color: $color-white;
font-size: 2rem;
}
ul {
display: flex;
margin-right: 1.5rem;
li {
color: $color-white;
font-size: $icon-size;
margin: 0 0.5rem;
transform: translateY(2px);
cursor: pointer;
}
}
}
.navIsScrolling {
border-bottom: $nav-border;
transition: all 300ms ease;
}
I have a bootstrap navbar that on collapse displays the items outside of it. When collapsing I have a div that works as an overlay that covers the whole page, so the navbar menu does not stay on top of any content of the page. The problem happens when I hide the menu: the div disappears immediately and during the hiding transition of the menu it stays on top of the page's content.
I want to keep the menu transition, so how can I apply a transition to the div when it is hiding? I've tried a lot of approaches but all of them only apply the transition when the div shows and not when it hides.
Check this demo, please: https://codesandbox.io/s/d31eo
React (demo):
import React, { Component } from "react";
import { Container, Nav, Navbar } from "react-bootstrap";
import "./styles.css";
import "bootstrap/dist/css/bootstrap.min.css";
export default class NavBar extends Component {
constructor(props) {
super(props);
this.state = {
open: false,
data: []
};
}
componentDidMount() {
this.setState({
data: [
{ name: "Test1" },
{ name: "Test2" },
{ name: "Test3" },
{ name: "Test4" }
]
});
}
onClick = () => {
this.setState({ open: !this.state.open });
};
render() {
return (
<>
<Navbar
className={`nav ${this.state.open ? "open" : ""}`}
expand="lg"
sticky="top"
>
<Container>
<Navbar.Toggle aria-controls="navbar-menu" onClick={this.onClick} />
<Navbar.Collapse id="navbar-menu">
<Nav className="ml-auto">
{this.state.data.map((category) => (
<Nav.Link href="#" key={`category-${category.name}`}>
<span className="link">{category.name}</span>
</Nav.Link>
))}
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
<div className={`overlay ${this.state.open ? "open" : ""}`} />
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MXwxMjA3fDB8MXxzZWFyY2h8Nnx8bmF0dXJhbHx8MHx8fA&ixlib=rb-1.2.1&q=80&w=1080" />
</>
);
}
}
CSS (demo):
.nav {
min-height: 55px;
width: 100%;
background-color: white;
border-bottom: 1px solid #979797;
}
.link {
font-size: 14px;
color: #3e433e;
line-height: 17px;
padding: 5px;
text-transform: uppercase;
}
.link:hover {
color: #000000;
text-decoration: none;
}
.overlay {
position: fixed;
}
#media (max-width: 1170px) {
.collapsing {
position: absolute !important;
z-index: 3;
width: 100%;
top: 75px;
}
.collapse.show {
display: block;
position: absolute;
z-index: 3;
width: 100%;
top: 75px;
}
.overlay.open {
height: 100%;
width: 100%;
position: fixed;
z-index: 2;
top: 55px; /* navbar min-heigth */
left: 0;
background-color: white;
}
}
Can you please check the below link code? Hope it will work for you. We have moved all declarations of .overlay.open to .overlay and added transition to .overlay(Default State), we don't need to add transition in .overlay.open.
For smooth transition we have added transition in height and opacity in Default State
transition: opacity 0.4s ease-in-out, height 0.4s ease-in-out.
1. In Default state - .overlay:
height set to '0px' and opacity set to '0'.
2. In Open state - .overlay.open:
height set to '100%' and opacity set to '1'.
Please refer to this link: https://codesandbox.io/s/summer-microservice-6d4c6
Step 1:
Move the styles of the overlay to its base css definition. leave in the .open only the css which should change on open. In our case we will change the height, so add height:0 to base .ovelay css and height:100% to .overlay.open
Step 2:
Add a css transition (e.g. transition: height .5s ease) to the base css, and set tansition: none to .overlay.open. this way the transition will apply only when its not have .open class. So it wll openinstantly, and close animated.
Hopefully this was the desired output:
https://codesandbox.io/s/charming-drake-dbtce?file=/src/styles.css
There is no need for the overlapping div for cover full body. We can manage it by the CSS property.
Use the following code for solving your problem.
React code:
import React, { Component } from "react";
import { Container, Nav, Navbar } from "react-bootstrap";
import "./styles.css";
import "bootstrap/dist/css/bootstrap.min.css";
export default class NavBar extends Component {
constructor(props) {
super(props);
this.state = {
open: false,
data: []
};
}
componentDidMount() {
this.setState({
data: [
{ name: "Test1" },
{ name: "Test2" },
{ name: "Test3" },
{ name: "Test4" }
]
});
}
render() {
return (
<>
<Navbar
className={`nav ${this.state.open ? "open" : ""}`}
expand="lg"
sticky="top"
>
<Container>
<Navbar.Toggle aria-controls="navbar-menu" />
<Navbar.Collapse id="navbar-menu">
<Nav className="ml-auto">
{this.state.data.map((category) => (
<Nav.Link href="#" key={`category-${category.name}`}>
<span className="link">{category.name}</span>
</Nav.Link>
))}
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MXwxMjA3fDB8MXxzZWFyY2h8Nnx8bmF0dXJhbHx8MHx8fA&ixlib=rb-1.2.1&q=80&w=1080" />
</>
);
}
}
CSS Code:
.nav {
min-height: 55px;
width: 100%;
background-color: white;
border-bottom: 1px solid #979797;
}
.link {
font-size: 14px;
color: #3e433e;
line-height: 17px;
padding: 5px;
text-transform: uppercase;
}
.link:hover {
color: #000000;
text-decoration: none;
}
#media (max-width: 991px) {
#navbar-menu {
position: fixed;
top: 57px;
left: 0;
right: 0;
background-color: #fff;
padding: 0 10px;
height: 0 !important;
transition: height 0.3s ease-out !important;
-webkit-transition: height 0.3s ease-out !important;
overflow: hidden;
}
#navbar-menu.show {
height: calc(100vh - 57px) !important;
}
}
I am learning css and react and a bit confused how to display:block for a component when a user clicks a button myButton. And to hide the component when the user clicks it again.
I am using mobile and desktop views and want the button to not show in desktop view, it will only show in Mobile view.
In Mobile view once the user clicks the button toggle component needs to show. That is where I dont know how onclick I can say for Toggle css to display:block to show entire component. Toggle shows in desktop view.
Here is code map.tsx
<div className={styles.controlsContainer}>
<Toggle />
</div>
<div className={styles.button_about}>
<AboutPopup />
<Button id=myButton
type="primary"
icon={<FilterOutlined />}
className={styles.filterbutton} onClick== --- How to say to enable toggle css to block??
></Button>
</div>
Here is how my map.module.scss looks like
.toggle {
width: 244px;
background: #ffffff;
border: 1px solid #d9d9d9;
box-sizing: border-box;
border-radius: 4px;
display: flex;
align-items: center;
float: left;
}
#media screen and (max-width: $mobileMax) {
.toggle {
display: none;
}
}
.button {
&_about {
#include for-desktop {
position: absolute;
bottom: 2em;
right: 2em;
}
#include for-mobile {
position: absolute;
top: 2em;
z-index: 1;
right: 2em;
z-index: 1;
}
}
}
.filterbutton {
width: 40px;
height: 40px;
left: calc(50% - 40px / 2);
top: calc(50% - 40px / 2);
background: $color-blue;
border-radius: 100px;
color: #83888c;
#include for-desktop {
display: none;
}
#include for-mobile {
position: absolute;
top: 4em;
right: 2em;
}
}
----- Update 2
So I did something like this
const [isShow, setIsShow] = React.useState(true);
const handleClick = () => {
setIsShow((prev) => !prev);
console.log(isShow);
};
return
(
<div className={styles.controlsContainer}>
<Toggle
className= {isShow ? {styles.toggle_show} : {styles.toggle_hide}}
/>
)
But I am getting a parsing error on styles.toggle_show Parsing error: ',' expected.eslt
maybe this could help
import React from "react";
import "./styles.css";
export default function App() {
const [isShow, setIsShow] = React.useState(false);
const handleClick = () => setIsShow((prev) => !prev);
return (
<>
<div className={isShow ? "show" : "hide"}>my toggling component</div>
<button onClick={handleClick}>toggle show</button>
</>
);
}
css:
.show {
display: block;
}
.hide {
display: none;
}
So my aim is to have a base button component and then a variant button which has the same markup as the base button but obviously has different styling, animations.
My base file is button.js
import React from 'react';
import styled,{ keyframes, ThemeProvider} from 'styled-components';
import theme from '../../theme/default';
// import {rotatecw, rotateccw} from '../../../theme/keyframes';
const ButtonWrapper = styled.button`
position: relative;
color: ${(props) => props.theme.colors.primary};
width: 256px;
height: 64px;
line-height: 64px;
background: none;
border: 1px solid ${(props) => props.theme.colors.primary};
&:hover {
cursor: pointer;
color: ${(props) => props.theme.colors.grey};
border: 1px solid ${(props) => props.theme.colors.grey};
}
}
`;
const ButtonText = styled.span`
// transition: all 0.1s;
// tranform: scale(1, 1);
`;
function Button(props) {
return (
<ThemeProvider theme={theme}>
<ButtonWrapper>
<ButtonText>
{props.text}
</ButtonText>
</ButtonWrapper>
</ThemeProvider>
);
}
export default Button;
So far so good.
My AnimatedButton file is like that
import React from 'react';
import Styled, { keyframes, ThemeProvider} from 'styled-components';
import theme from '../../theme/default';
import Button from '../../components/button/button'
// import {rotatecw, rotateccw} from '../../../theme/keyframes';
const rotatecw = keyframes`
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
`
const rotateccw = keyframes`
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
`
const AnimatedButtonWrapper = Styled(Button)`
transition: all 0.3s;
&:before,
&:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
bottom: 0;
left: 0;
z-index: 1;
transition: all 0.3s;
border: 1px solid ${(props) => props.theme.colors.primary};
}
&:hover {
cursor: pointer;
&:after {
animation-name: ${rotatecw};
animation-duration: 2s;
}
&:before {
animation-name: ${rotateccw};
animation-duration: 3s;
}
&:before,
&:after {
left: 96px;
width: 64px;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
`;
function AnimatedButton(props) {
return (
<ThemeProvider theme={theme}>
<AnimatedButtonWrapper>
</AnimatedButtonWrapper>
</ThemeProvider>
);
}
export default AnimatedButton;
What confused me is the bottom part. seems like a repeat ... How do I ensure it generates the same markup as Button ? I want my animated button to extend the markup and the css.
Eventually, is there a way to call my button this way
<Button animatedButton text="test"></Button>
When you extend a Button with styled(Button), you are essentially creating a more specific version of it and is planning to use the new specific one instead.
But when you want to use the button as:
<Button animatedButton text="test"></Button>
which is a variant passing in animatedButton as a prop, you are looking to incorporate these changes in the ButtonComponent itself.
const ButtonWrapper = styled.button`
All the normal button stuff
${props.animated && `
All the animation stuff goes here
`}
`
function Button(props) {
return (
<ThemeProvider theme={theme}>
<ButtonWrapper animated={props.animatedButton}>
<ButtonText>
{props.text}
</ButtonText>
</ButtonWrapper>
</ThemeProvider>
);
}
If you have lots of variants as such, creating styles for these like this can be excruciating. This is why styled-components has a helper library styled-theming that can help out. (It isn't going be much help for the animated part since that's pretty much adding code rather than changing.
IconButton in #material-ui/core/IconButton is showing a weird elliptical background when I hover the cursor over it.
I thought it is a mistake by me, so I just copied the code from material-ui website, but the problem remains.
However, when I created new react project, and created an icon button in it, the background was the usual circle.
I'm new to react and can't figure out what is going on, I'm using icon button without any explicit styling,
App.js
import React, { Component } from 'react';
import './App.css';
import { IconButton } from '#material-ui/core';
import WorkIcon from '#material-ui/icons/Work';
import CssBaseline from '#material-ui/core/CssBaseline';
class App extends Component {
render() {
return (
<div>
<CssBaseline />
<IconButton>
<WorkIcon />
</IconButton>
</div>
);
}
}
export default App;
App.css
.App {
text-align: center;
}
.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 80px;
}
.App-header {
background-color: #222;
height: 150px;
padding: 20px;
color: white;
}
.App-title {
font-size: 1.5em;
}
.App-intro {
font-size: large;
}
#keyframes App-logo-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.MuiCardContent-root-29 {
display: inline-block;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 500px;
height: 300px;
margin: auto;
background-color: #f3f3f3;
}
.login {
margin-top: 50px;
margin-left: 50px;
}
.form-group {
margin-bottom: 35px;
}
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from "react-redux";
import './index.css';
import App from './App';
import store from "./store/index";
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<Provider store={store}>
<App />
</Provider>, document.getElementById('root'));
registerServiceWorker();
index.css
body {
background-color : #484848;
margin: 0;
padding: 0;
}
h1 {
color : #000000;
text-align : center;
font-family: "SIMPSON";
}
form {
width: 300px;
margin: 50px auto;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
width: 100px;
}
.tableHeader {
background-color: green !important;
}
.header {
color: green;
font-weight: bold;
}
.edit {
height: 30px;
cursor: pointer;
}
.delete {
height: 20px;
cursor: pointer;
padding-left: 10px;
}
This problem persists in my whole project wherever I use icon buttons, and not just with this file only. And when I use this same file in a new project it works as expected: No elliptical backgrounds.
EDIT:
The accepted answer works well. In my also case I tried setting the width in button of index.css to auto and it fixed the error too.
This is what I did to remove the elliptical shape:
<IconButton style={{borderRadius: 0}}>
<DeleteIcon/>
</IconButton>
Now, it will be a rectangular shape when hovered.
I don't know why the above two solutions didn't work for me. So I added margin and width to the parent element and padding-right to the child element in App.css.
//For the buttons on top
button.MuiButtonBase-root {
margin: 10px;
width: 50px;
}
button.MuiButtonBase-root span span {
padding-right: 50px;
}
//For the checkboxes
span.MuiButtonBase-root {
margin-left: 10px;
width: 45px;
}
span.MuiButtonBase-root span {
padding-right: 10px;
}
The problem is the button CSS in your index.css. It is setting the width of all buttons to 100px. IconButton is implemented via a button tag around the icon.
Fixing the look of IconButton is easy -- just remove that button CSS. The more tedious part is that presumably you want that button styling on all your other buttons.
One way to handle this is to change the following in index.css:
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
width: 100px;
}
to be a CSS class rather than targeting all buttons:
.standard-button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
width: 100px;
}
and then change places where you are rendering button elements to use:
<button className="standard-button">
instead of just <button>.
This worked for me
<IconButton style={{height:"45px",marginTop:"20px"}}>
<DeleteIcon/>
</IconButton>
Hi you can override ripple root and child style to change border radius or background color.
const useStyles = makeStyles({
root: {
borderRadius: 0, // <---- icon button root style
'.MuiTouchRipple-ripple .MuiTouchRipple-child': { // <----this should change ripple style when clicked or touched
borderRadius: 0,
backgroundColor: 'red'
},
},
});
<IconButton className={classes.rippleRoot}>
<WorkIcon />
</IconButton>
OR MUI5 with sx props
<IconButton
sx={{
borderRadius: 0,
'.MuiTouchRipple-ripple .MuiTouchRipple-child': {
borderRadius: 0,
backgroundColor: 'red',
},
}}
>
<WorkIcon />
</IconButton>
use height and width with same value to have circular shade on hover-
<IconButton sx={{height:"40px",width:"40px"}}>
<WorkIcon />
</IconButton>