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.
Related
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);
}
I have added a keyframe animation to slowly zoom the background image in and it works perfectly, however when I move mouse out the animation jumps back to the original state instead of zooming out.
#startup.hover:before {
opacity:1;
-webkit-animation: animatedBackground 5s ease-in-out 1;
-moz-animation: animatedBackground 5s ease-in-out 1;
animation: animatedBackground 5s ease-in-out 1;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#-webkit-keyframes animatedBackground {
0% {
-webkit-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
}
100% {
-webkit-transform: scale(1.1, 1.1);
-moz-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
-o-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}
}
Am I missing something here?
first of all, is .hover a class you are adding or were you meant to use :hover? Just pointing this out. Assuming this is a class, you should add the transitions animation on the id.
#startup:before {
-webkit-transition: all 5s ease-in-out;
-moz-transition: all 5s ease-in-out;
-o-transition: all 5s ease-in-out;
transition: all 5s ease-in-out;
}
..this is why it's breaking when you are hovering out. There's no transition animation without the class!
You dont need such an advanced tool as a keyframes to make this effect.
It is easily achivable with transitions, here is an example.
https://jsfiddle.net/vqL3stjz/
.animable{
width: 100px;
height: 100px;
background-color: #000;
transition: all 500ms;
}
.animable:hover{
transform: scale(1.3, 1.3);
transition: all 500ms;
}
And if you need to make it with keyframes, then i suggest just applying reverse animation to unhovered element.
However, you will need to use some javascript then, to prevent side effect like animation running on the element right after it is loaded etc.
TL;DR Better use tranistions, unless you really need to use keyframes.
I created this SVG and put in some inline CSS to create a hover effect but it doesn't work. The dashed circle doesn't move and rotate, it only changes opacity. In addition, there's no transition on mouse out like normal css transition. How can I fix this ?
.wrap:hover .dash {
opacity: 0.2;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: translateX(10px);
-webkit-transform: translateX(10px);
transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
transition: 0.3s linear;
}
The link to my code fiddle: http://jsfiddle.net/7s4vszu3/1/
There are a couple of issues here:
First, your transition and transform-origin should be set without the hover selector. This is the reason you weren't seeing the proper transition on mouse out.
Second, you need to include both your transformations in the same rule, so that one doesn't overwrite the other. In your code, your translate is overwriting your rotate.
Here's what it should look like:
.wrap .dash {
transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
transition: transform 1s linear, opacity 1s linear;
}
.wrap:hover .dash {
opacity: 0.2;
transform: rotate(90deg) translateX(10px);
-webkit-transform: rotate(90deg) translateX(10px);
}
Example here: http://jsfiddle.net/unc3re9b/
I am using LESS and BOOTSTRAP for a website, and this is my first time actually using the less language, so this entire "mixins" thing is really confusing to me. I have read all of the documentation on the dotless website, and on the bootstrap site, but the actual "way" to use some of the mixins is escaping me.
In specific, I am having a hard time understanding how you discern what passes as a valid parameter. I am attempting to do with with transitions/transforms, using the following CSS...
-webkit-transform-origin: top;
-webkit-transition: all 0.2s linear;
-webkit-transform: scale(1, 0);
-webkit-animation-fill-mode: forwards;
-moz-transform-origin: top;
-moz-transition: all 0.2s linear;
-moz-transform: scale(1, 0);
-moz-animation-fill-mode: forwards;
-ms-transform-origin: top;
-ms-transition: all 0.2s linear;
-ms-transform: scale(1, 0);
-ms-animation-fill-mode: forwards;
-o-transform-origin: top;
-o-transition: all 0.2s linear;
-o-transform: scale(1, 0);
-o-animation-fill-mode: forwards;
transform-origin: top;
transition: all 0.2s linear;
transform: scale(1, 0);
animation-fill-mode: forwards;
From what I grasp, I am supposed to be able to do this in a much simpler format using the mixins built into bootstraps. The mixins are declared as follows;
// Transitions
.transition(#transition) {
-webkit-transition: #transition;
transition: #transition;
}
.transition-property(#transition-property) {
-webkit-transition-property: #transition-property;
transition-property: #transition-property;
}
.transition-delay(#transition-delay) {
-webkit-transition-delay: #transition-delay;
transition-delay: #transition-delay;
}
.transition-duration(#transition-duration) {
-webkit-transition-duration: #transition-duration;
transition-duration: #transition-duration;
}
.transition-transform(#transition) {
-webkit-transition: -webkit-transform #transition;
-moz-transition: -moz-transform #transition;
-o-transition: -o-transform #transition;
transition: transform #transition;
}
// Transformations
.rotate(#degrees) {
-webkit-transform: rotate(#degrees);
-ms-transform: rotate(#degrees); // IE9 only
transform: rotate(#degrees);
}
.scale(#ratio; #ratio-y...) {
-webkit-transform: scale(#ratio, #ratio-y);
-ms-transform: scale(#ratio, #ratio-y); // IE9 only
transform: scale(#ratio, #ratio-y);
}
.translate(#x; #y) {
-webkit-transform: translate(#x, #y);
-ms-transform: translate(#x, #y); // IE9 only
transform: translate(#x, #y);
}
.skew(#x; #y) {
-webkit-transform: skew(#x, #y);
-ms-transform: skewX(#x) skewY(#y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
transform: skew(#x, #y);
}
.translate3d(#x; #y; #z) {
-webkit-transform: translate3d(#x, #y, #z);
transform: translate3d(#x, #y, #z);
}
.rotateX(#degrees) {
-webkit-transform: rotateX(#degrees);
-ms-transform: rotateX(#degrees); // IE9 only
transform: rotateX(#degrees);
}
.rotateY(#degrees) {
-webkit-transform: rotateY(#degrees);
-ms-transform: rotateY(#degrees); // IE9 only
transform: rotateY(#degrees);
}
.perspective(#perspective) {
-webkit-perspective: #perspective;
-moz-perspective: #perspective;
perspective: #perspective;
}
.perspective-origin(#perspective) {
-webkit-perspective-origin: #perspective;
-moz-perspective-origin: #perspective;
perspective-origin: #perspective;
}
.transform-origin(#origin) {
-webkit-transform-origin: #origin;
-moz-transform-origin: #origin;
-ms-transform-origin: #origin; // IE9 only
transform-origin: #origin;
}
But I am not entirely clear on how this works. I cannot seem to figure out what "parameters" to pass through #transition and the like to make this code work. Can anyone help me out here? I am just kind of lost.
Whatever text you pass to an #variable when you use the mixin in a selector block will be copied to the places where the #variables appear in the mixins, and the contents of the mixins will be placed in your block. You can consider mixins somewhat like placeholder functions.
That means that if you declare a selector like:
div p:first-child {
.transition(width 2s ease-in-out, color 2s;);
color: red;
}
Using the .transition mixin you listed above, the Less processor will generate a CSS like:
div p:first-child {
-webkit-transition: width 2s ease-in-out, color 2s;
transition: width 2s ease-in-out, color 2s;
color: #FF0000;
}
The semicolon is important at the end of the argument otherwise Less may get confused and think you are sending two parameters, since comma-separated parameters are also valid. It won't be a problem in this case (since there is no .transition mixin that accepts two arguments), but it's good practice to always separate arguments with semicolons.
So to use the mixins, simply place them where you would add CSS declarations, end them with a semicolon, and pass the parameters as arguments.
Less does no duplication detection, so if you call the mixin twice, it just copies the replaced contents twice. If you already have a transition: property, for example, the mixin will add another one and its effect may be lost if yours comes after.
The best place to learn about Less, variables and mixins in at http://lesscss.org which has the full documentation in a few pages with plenty of examples. It's also great to have an editor which converts your Less files into CSS in real time so you understand how it works.
For the example you posted, you could create a mixin like the following:
.your-mixin(#origin, #transition, #transform, #anim-fill-mode) {
-webkit-transform-origin: #origin;
-webkit-transition: #transition;
-webkit-transform: #transform;
-webkit-animation-fill-mode: #anim-fill-mode;
-moz-transform-origin: #origin;
-moz-transition: #transition;
-moz-transform: #transform;
-moz-animation-fill-mode: #anim-fill-mode;
-ms-transform-origin: #origin;
-ms-transition: #transition;
-ms-transform: #transform;
-ms-animation-fill-mode: #anim-fill-mode;
-o-transform-origin: #origin;
-o-transition: #transition;
-o-transform: #transform;
-o-animation-fill-mode: #anim-fill-mode;
transform-origin: #origin;
transition: #transition;
transform: #transform;
animation-fill-mode: #anim-fill-mode;
}
To use it, you add it inside a selector block where you want the properties copied to:
.your-selector, .other-selector {
.your-mixin(top; all 0.2s linear; scale(1, 0); forwards;);
}
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