How to apply CSS transition on hide? - css

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;
}
}

Related

How to change CSS of a child component from parent component

I have a react component called TeamBanner like so
import styles from "./teamBanner.module.css";
import { useNavigate } from "react-router-dom";
import { TeamBannerProps } from "../ProjectTypes.types";
export const TeamBanner = ({
team,
onBannerClick,
showName,
}: TeamBannerProps) => {
let navigate = useNavigate();
const handleOnClick = () => {
navigate(`/${team}`);
onBannerClick();
};
return (
<div
className={`${styles.container} flex theme-light ${
showName ? "" : styles["no-name"]
}`}
title={team}
onClick={handleOnClick}
>
<div>
<img
src={require(`../logos/${team}.svg`)}
alt="logo"
className={`${styles.logo} ${showName ? "" : styles["only-logo"]}`}
/>
</div>
{showName ? team : ""}
</div>
);
};
The teamBanner.module.css file is like so
.container {
margin: 0.25em;
align-items: center;
cursor: pointer;
top: 0;
z-index: 2;
background-color: hsl(var(--color-background));
padding: 0.1em 0.25em;
border-radius: 0.5em;
box-shadow: 0.05rem 0.05rem 0.2rem rgb(0 0 0 / 50%);
font-family: var(--ff-serif);
font-size: var(--fs-200);
}
.logo {
display: inline-block;
vertical-align: middle;
width: 3vmax;
height: 3vmax;
}
.container:hover {
outline: 0.15em solid hsl(240, 90%, 67%);
}
.no-name {
border-radius: 0.25em;
}
.only-logo {
width: 5vmax;
height: 5vmax;
}
I am using it to create a list of team of a page & this works just fine.
However, I want to use it in another place also. In the place, the to now want the .container:hover effect & I want the font properties of the .contaner and width & height properties of the .logo changed.
How can I accomplish this? only changing these items of the module.css? Can any one help? Thanks

adding Border animations with dynamic classes in React with SCSS

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;
}

How to change a slide out drawer in react grid to position fixed

I am trying to create a slide out drawer exactly like the one present in JIRA.
Here is what JIRA looks like (notice how sidebar opens and pushes content to the side):
Here is what I have managed to create in my code:
The sliding effect and shelf looks similar enough and I am happy with it. However, there is one feature that Jira has that I find quite interesting and would like to recreate in my code base. When the sidebar is closed, and the user hovers over the sliver of sidebar that remains, the sidebar opens up as if the button to open had been clicked, and it then closes when the mouse leaves the sidebar. What is really interesting to me is that the grid format does not change and the sidebar appears to not move the other content on the page which makes me believe it somehow switches to a fixed position just during this mouse over event. I am not sure how to achieve this effect and my code is currently not working. Any help would be greatly appreciated!
Here is the desired effect (notice how sidebar opens and DOES NOT push content to the side, which is different than actually clicking the button. See first gif example):
EDIT: Here is the effect for mousing in to the sidebar and the button becoming visible while in the sidebar:
Here is what I have tried so far:
(SideBar Component)
import React, { useState, useRef } from 'react';
import { Link } from 'react-router-dom';
import './RenewalSidebar.css';
function RenewalSidebar({ worksheetID }) {
const [sidebar, setSidebar] = useState(false);
const [cursorInSidebar, setCursorInSidebar] = useState(false);
const showSidebar = () => setSidebar(!sidebar);
const sidebarRef = useRef(null);
return (
<nav
ref={sidebarRef}
className={sidebar ? 'sidebar' : 'sidebar inactive'}
onMouseLeave={() => setCursorInSidebar(false)}
onMouseOver={(e) => {
if (e.target === sidebarRef.current || sidebarRef.current.contains(e.target)) {
console.log(`Hey I'm in the sidebar`);
setCursorInSidebar(true);
}
}}
data-sidebarhover={cursorInSidebar}
data-sidebaropen={!sidebar}
>
<div
role="button"
tabIndex={0}
className="hamburger"
type="button"
onClick={showSidebar}
data-open={!sidebar}
data-hover={cursorInSidebar}
onMouseEnter={() => setCursorInSidebar(true)}
onMouseLeave={() => setCursorInSidebar(false)}
>
{sidebar ? '>' : '<'}
</div>
<div className="sidebar-content">
<ul onClick={showSidebar} data-open={!sidebar}>
<li>
<Link to={`/`}>Test</Link>
</li>
<li>
<Link to={`/`}>Test</Link>
</li>
<li>
<Link to={`/`}>Test</Link>
</li>
</ul>
</div>
</nav>
);
}
export default RenewalSidebar;
Here is my css for the top level grid container I am using:
.RenewalsDetailContainer {
display: grid;
grid-template-columns: max-content 1fr;
justify-items: center;
}
And here is my css for the Sidebar component:
.sidebar {
position: relative;
/* top: 20vh;
left: -300px; */
width: 20px;
height: 100%;
/* border-radius: 0px 5px 5px 0px; */
background-color: aliceblue;
z-index: 0;
transition: width 200ms ease-out;
box-shadow: inset -10px 0 25px -25px #888;
padding: 0 10px;
}
.sidebar.inactive {
width: 300px;
z-index: 6000;
}
.sidebar ul {
margin: 0;
padding: 0;
}
.sidebar ul[data-open='false'] {
display: none;
}
.sidebar li a {
display: block;
border: none;
background-color: white;
padding: 14px 28px;
font-size: 16px;
margin: 10px 10px 10px 10px;
width: auto;
text-align: center;
}
/* .sidebar[data-sidebaropen='false'][data-sidebarhover='true'] {
z-index: -9000;
} */
.sidebar[data-sidebaropen='false'][data-sidebarhover='true'] .sidebar-content {
position: fixed;
width: 300px;
top: 0;
left: 0;
background-color: purple;
}
.hamburger {
color: rgb(107, 119, 140);
background-color: rgb(255, 255, 255);
height: 24px;
border: none;
outline: 0;
width: 24px;
top: 32px;
position: absolute;
right: 0px;
font-size: 15px;
font-weight: bold;
border-radius: 50%;
transform: translateX(50%);
display: grid;
place-items: center;
transition: all 500ms linear, color 100ms linear, opacity 350ms cubic-bezier(0.2, 0, 0, 1);
box-shadow: rgb(9 30 66 / 8%) 0px 0px 0px 1px, rgb(9 30 66 / 8%) 0px 2px 4px 1px;
}
.hamburger:hover {
background-color: #4c9aff;
color: white;
box-shadow: none;
cursor: pointer;
}
.hamburger[data-open='true'] {
opacity: 0;
}
.hamburger[data-open='true']:hover {
opacity: 1;
}
.hamburger[data-open='true'][data-hover='true'] {
opacity: 1;
}
.hamburger:after,
.hamburger:before,
.hamburger div {
background-color: #0076c7;
/* margin: 7px 0; */
border-radius: 3px;
content: '';
display: block;
transition: all 300ms ease-in-out;
}
.sidebar-content {
position: relative;
width: 100%;
height: 100%;
}
.sidebar-content .sidebar.active .hamburger div {
transform: scale(0);
}
And finally...here is a Code sandbox link I have created to help you test the code. Click me!
I believe I have addressed all of your feature requests in this updated CodeSandbox:
https://codesandbox.io/s/jira-inspired-menu-bnyd8
The crux of the solution was to decouple the SideBar content from the mechanics of how that column is propped open, depending on UI state. It required a bit of nesting and absolute positioning to get the job done.
The content width of the SideBar is measured with getBoundingClientRect() when the panel is opened up, and then that value is stored in state. That value is then used to control the width of the SideBar container when it is open, as well as the shim width (which is what actually pushes the main content to the side when the SideBar is fully opened) and hamburger x coordinate.
Relevant code for my solution is in SideBar.js and SideBar.css in the CodeSandbox link above.
Preview of UI in action:
I have made few changes to accommodate this.
Nesting of sidebar and button will raise conflict between onMouseEnter events, you won't be able to click on the button. (Moved the button outside nav)
Position absolute does not push the content. And you can use react inline styles like this :
style={{position: cursorInSidebar && !sidebar ? "absolute" : "relative"}}
Added isOpen to track if the sidebar is open. Either by button click or mouse hover.
onClick events should set cursorInSidebar.
const SideBar = () => {
const [sidebar, setSidebar] = useState(false);
const [cursorInSidebar, setCursorInSidebar] = useState(false);
const showSidebar = (isOpen) => {
setSidebar(!isOpen);
setCursorInSidebar(false);
};
const sidebarRef = useRef(null);
const enterSideBar = () => {
setCursorInSidebar(true);
};
const leaveSideBar = () => {
setCursorInSidebar(false);
};
const isOpen = sidebar || cursorInSidebar;
return (
<div className="divSid">
<div
role="button"
tabIndex={0}
className="hamburger"
type="button"
onClick={() => showSidebar(isOpen)}
data-open={isOpen}
>
{isOpen ? "<" : ">"}
</div>
<nav
ref={sidebarRef}
style={{
position: cursorInSidebar && !sidebar ? "absolute" : "relative"
}}
className={isOpen ? "sidebar inactive" : "sidebar"}
data-sidebaropen={isOpen}
onMouseEnter={enterSideBar}
onMouseLeave={leaveSideBar}
>
<div className="sidebar-content">
<ul onClick={() => showSidebar(isOpen)} data-open={isOpen}>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</div>
</nav>
</div>
);
};
While moving button outside nav, alignment of components will break. Here is the working code.

css React onclick show component

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;
}

material-ui icon button highlights with an elliptical background when cursor is hovered over it

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>

Resources