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 */
}
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.
i'm trying to create a custom button for my portfolio.
This button will be animated, the top part sliding in from left and the bottom part sliding in from right when hovered.
At the center of it will be the Category linked to this button.
Here an illustration :
How can i set my text in the center for every that i will create ? I can't use "position: absolute" property cause the reference would be the webpage and not the position where the custom component is declared...
Here my actual code :
CSS
const CatStyle = styled.div`
box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.75);
height: 50px;
max-width: 150px;
background-color: white;
display: flex;
justify-content: center;
flex-direction: column;
cursor: pointer;
transition : background-color 0.5s ease-out;
:hover div{
display: flex;
}
.catContent {
position: relative;
align-self: center;
font-size: 1.5rem;
}
.topSlideAnimation {
display: none
height: 50%;
background-color: green;
}
.botSlideAnimation {
transition : background-color 0.5s ease-out;
display: none;
height: 50%;
background-color: blue;
}
`
JSX
const ButtonCat = (props) => (
<CatStyle>
<div className="topSlideAnimation"></div>
<div className="catContent">Hello</div>
<div className="botSlideAnimation"></div>
</CatStyle>
)
Not done any jsx so not sure what your catstyle tag would render, but if you can just render a button (or div), I would do the following
Make an outer container that is flex (for aligning text in center)
Make an inner container that is for the text (so you can position it relatively and add a z-index to it)
Add pseudo elements to your outer container for the animated bits (rather than having 2 empty divs)
* {
box-sizing: border-box;
}
.button {
display: inline-flex; /* make flex for centring */
justify-content: center; /* vertically centre */
align-items: center; /* horizontally centre */
position: relative; /* for adding absolute positioned children */
min-height: 50px; /* test value to show text is centred */
overflow: hidden; /* hide pseudo elements when not shown */
}
.button:before,
.button:after {
content: ''; /* make coloured animatable bits */
display: block;
height: 50%;
width: 100%;
position: absolute;
transition: all 1s ease-in;
z-index: 1;
}
.button:before {
top: 0;
right: 100%;
background: grey;
}
.button:hover:before {
right: 0;
}
.button:after {
top: 50%;
left: 100%;
background: darkgrey;
}
.button:hover:after {
left: 0;
}
.text {
position: relative; /* needs to have a higher z-index than the pseduo elements so text appears on top */
z-index: 2;
}
<button class="button"><span class="text">test content</span></button>
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'm trying to build a gallery where every image has a hover effect (this one). When I jhover the image and click the link inside , a bootstrap modal opens showing some content.
Until here works fine, however, when I close this modal, the image is not displaying properly in the main page. You can see my problem here:
http://www.bootply.com/90dGFlCrxI
Can anyone explain me what am I doing wrong?
Thanks very much guys!
The issue seems be the
overflow: hidden;
in this css rule:
.effect figure {
margin: 0;
position: relative;
/*overflow: hidden;*/
text-align: left;
}
if you remove the issue is fixed.
another work around:
.effect figcaption {
position: absolute;
width: 100%;
left: 0;
padding: 7px;
background: #26BC8A;
color: #ed4e6e;
height: 50px;
top: auto;
bottom: 0;
opacity: 0;
/* transform: translateY(100%); */
/* transition: transform 0.4s, opacity 0.1s 0.3s; */
}
the translateY is not working as expected.
I have a div called main content, inside this div is another div called slideup. Using CSS animation, when you hover over the main content div, the slide up div slides up from the bottom to 50% height. This can be seen in my css code below
.maincontentdiv {
position: relative;
height: 100px;
width: 100%;
}
.slideup {
position: absolute;
width: 100%;
bottom: -2px;
min-height: 0;
color: #FFF;
transition: min-height 250ms ease-in;
background-color: #666666;
text-align: center;
height:20px;
}
.maincontentdiv:active > .slideup, .maincontentdiv:hover > .slideup {
min-height: 50%;
}
The hover works perfectly well, however I included the click function (.active) for touchscreen devices. I can not seem to get the click function working. Could somebody please tell me what I have done wrong?
Thanks