Just trying to figure out how AngularJS does this effect with its dialogs: https://material.angularjs.org/latest/demo/dialog
If you notice the dialog pops out from the button bounds and falls back into it.
How can I achieve this effect with css/javascript in react?
Using the Developer Console to inspect, the element shows that it uses transition CSS:
md-dialog.md-transition-in {
opacity: 1;
transition: all .4s cubic-bezier(.25,.8,.25,1);
transition-property: all;
transition-duration: 0.4s;
transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
transition-delay: 0s;
-webkit-transform: translate(0,0) scale(1);
transform: translate(0,0) scale(1);
}
Related
I have an image with a button inside when i hover the image both the image and button becomes larger and when i move my mouse outside the image they go back to normal. the issue is when i move my cursor over the Button inside the image the image goes back to normal size, i want the image to only go back to normal size if neither the image or button is being hovered.
.ProjectImage:hover ~ .ProjectLiveVersionButton {
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
transform: scale(1.1);
}
// is there a way to check if image or button is hovered?
// something like this
.ProjectImage:not(:hover) &&(AND) .ProjectLiveVersionButton:not(:hover) {
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
transform: scale(1);
}
I have a modal window which I wrote in ReactJS.I need to realize Fade in Scale effect to this modal window.Something like this (Please look to effect with name Fade in & Scale).
I found a library which realize that effect rodal (Please look to effect with name Zoom) but not in React way ,dynamically removing element from DOM.
So I wrote it from scratch.But I have a problem.When modal fade out scale animation work's but when it fade in it not work's.
Please help.
Codesandbox
My styled component style.
&.fade-in {
opacity: 1;
/* transition: opacity linear 0.15s; */
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
transition: all 0.3s;
}
&.fade-out {
opacity: 0;
transition: opacity linear 0.15s;
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
-ms-transform: scale(0.7);
transform: scale(0.7);
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
you need to add scale to modal in order to achieve this
Check the sandbok link
you need to add a transform: scale(0); to the main div, this will solve your issues.
Reproduction online
Reproduction with vanilla Javascript
I'm creating a CSS animation by using this:
.slides.future.active {
-webkit-animation-name: sectionIn;
animation-name: sectionIn;
}
#keyframes sectionIn {
....
}{
.animated {
transition: all 800ms ease;
-moz-transition: all 800ms ease;
-webkit-animation-duration: 800ms;
animation-duration: 800ms;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: ease;
timing-function: ease;
}
.slides.future{
-webkit-transform: translate3d(0, 100%, 0);
-ms-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0 );
}
Having the following HTML:
<div id="demo2" class="slides animated future active">
Demo
</div>
<div class="slides animated future">Demo 2</div>
Now, when I remove the class future from the element, the animation gets fired again.
This only happends in IE. (10, 11, 12, 13) Working well in Firefox, Chrome, Safari...
Reproduction online
Reproduction with vanilla Javascript
Strangely (not very strange for IE) you need to also tell the browser what to do when .slides and .active are there but not .future. If you don't then for that split second it goes back to where it was until it gets the instruction to revert back again. So you need to add:
.slides.active:not(.future){
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0 );
}
Note: Tested in IE 11 only.
Fiddle
A possible solution is to change the CSS selector.
Instead of .animated use .future.animated and apply the animation on that selector.
.future.animated {
transition: all 800ms ease;
-moz-transition: all 800ms ease;
-webkit-animation-duration: 800ms;
animation-duration: 800ms;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: ease;
timing-function: ease;
}
That way only the element with both classes gets animated. So removing the class future from the element prevents it from animating again.
https://jsfiddle.net/jsms8p1k/17/
I have this CSS animation where when a page is chosen, the page scrolls from the bottom to the top.
The issue I am having is that the page briefly displays in it's top position first, then disappears to scroll from the bottom to top. How can I keep the page from showing before it's animation?
Note: I would like to keep the brief animation delay 500ms
mainPanelContent.classList.add('slide-up-now');
.slide-up-now {
-webkit-animation: slide-up .6s cubic-bezier(0.4, 0, 0.2, 1) 500ms;
-moz-animation: slide-up .6s cubic-bezier(0.4, 0, 0.2, 1) 500ms;
animation: slide-up .6s cubic-bezier(0.4, 0, 0.2, 1) 500ms;
}
#-webkit-keyframes slide-up {
0% { -webkit-transform: translateY(100%); }
100% { -webkit-transform: translateY(0); }
}
Solution:
The correct solution to this issue is to set animation-fill-mode as backwards (or use the shorthand like below):
animation: slide-up .6s cubic-bezier(0.4, 0, 0.2, 1) 500ms backwards;
Reasoning:
When delay is added to any animation, its execution is put on hold till that time has elapsed and during this time, the element holds whatever position was assigned to it initially. For it to start at the translated position, you either have to manually add the setting to the element (or) tell the UA to do it for you.
When we set the animation-fill-mode as backwards, the UA automatically sets the property value defined for the first frame of the animation's first iteration as the properties during the delay period and thus it will start at the translated position for your case.
Here's what the W3C Spec says about animation-fill-mode: backwards
During the period defined by animation-delay, the animation will apply the property values defined in the keyframe that will start the first iteration of the animation. These are either the values of the from keyframe (when animation-direction is normal or alternate) or those of the to keyframe (when animation-direction is reverse or alternate-reverse).
Alternate Solution:
You can of-course solve this by adding a transform: translateY(100%) to the element originally also but that makes less sense when there is a specific property to achieve it.
(I assume that the element did not have transform: translateY(100%) initially in your code.)
Why using opacity may not always be acceptable solution?
Solution by using opacity (as you have done in your own answer) is not wrong but you would notice that the opacity also gets animated from 0 to 1 over the course of the animation which means that the content slowly fades into view as opposed to just a slide up action. While, this can also be fixed by adding extra keyframes in between, those are just work-arounds for something that could have been achieved by using a single property.
Sample for all solutions:
In the below snippet, I have added samples for the version with the problem and all possible fixes.
.slide-up-now {
animation: slide-up .6s cubic-bezier(0.4, 0, 0.2, 1) 500ms;
}
.slide-up-now-fixed { /* preferred method */
animation: slide-up .6s cubic-bezier(0.4, 0, 0.2, 1) 500ms backwards;
}
.slide-up-now-fixed-initial-prop {
transform: translateY(100%);
animation: slide-up .6s cubic-bezier(0.4, 0, 0.2, 1) 500ms forwards;
}
.slide-up-now-opacity {
opacity: 0;
animation: slide-up-opacity .6s cubic-bezier(0.4, 0, 0.2, 1) 500ms forwards;
}
#keyframes slide-up {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0);
}
}
#keyframes slide-up-opacity {
0% {
transform: translateY(100%);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
/* Just for demo */
div{
display: inline-block;
height: 100px;
margin: 10px;
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='slide-up-now'>Slide Up Now</div>
<div class='slide-up-now-fixed'>Fixed by Fill Mode</div>
<div class='slide-up-now-fixed-initial-prop'>Fixed by Initial Setting</div>
<div class='slide-up-now-opacity'>Fixed by Opacity</div>
I got it with this:
.slide-up-now {
opacity: 0;
-webkit-animation: slide-up 1s cubic-bezier(0.4, 0, 0.2, 1) 500ms forwards;
}
#-webkit-keyframes slide-up {
0% { -webkit-transform: translateY(100%); opacity: 1 }
100% { -webkit-transform: translateY(0); opacity: 1 }
}
Note: I did opacity: 1 twice on purpose. I don't want any opacity effect at all and the first opacity 1 was not enough.
I m trying to make a simple hover effect with some images in an html website.
The plan is : When you hover over an image , the image shades and some details appear.
The css code is this.
/* Hover overs */
.folio4:hover .face {
opacity:1;
cursor: pointer;
}
.folio4:hover img {
opacity: 1;
}
.folio4:hover h2 {
opacity: 1;
}
.folio4:hover a.icon {
opacity:1;
transform: translateY(75px);
-webkit-transform: translateY(75px);
-o-transform: translateY(75px);
-ms-transform: translateY(75px);
transition: 500ms;
-webkit-transition: 500ms;
-o-transition: 500ms;
-ms-transition: 500ms;
}
.folio4:hover a.icon2 {
transition: 500ms;
-webkit-transition: 500ms;
-o-transition: 500ms;
-ms-transition: 500ms;
transform: translateY(75px);
-webkit-transform: translateY(75px);
-o-transform: translateY(75px);
-ms-transform: translateY(75px);
opacity: 1;
}
It works on all browsers except mobile Safari. What can I do for this to work?
Thanks in advance for every answer.
As far as I know it, the hover effect can not work with mobile devices, due to the fact that the system does not see the hover effect, as you know it from your computer.
The only thing you can do is, is to set that hover effect as a on click effect only for the responsive design of your page, so the user has to tap on a picture and gets the details then.
Sorry if this is not the solution