What is the best way to make a div rotate on click, but with a transition?
I tried this but it only makes a smooth transition when class is added but not when class is removed :
js :
$('#firstDiv' + id).click(function(){
$("#Img" + id).toggleClass('rotated');
});
css :
.rotated {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transition: all 0.1s linear;
}
transition css property should stay on the element.
transition property is what makes makes the rotation look smooth. When it's on the class which is doing the rotation and you remove the class, even the transition property gets removed. Hence the rotation end is not smooth.
Your logic is right but use may be a different class to apply -webkit-transition: all 0.1s linear; or apply directly on the element. Make sure it is not removed when you remove rotated class.
const myDiv = $('#my-div');
setTimeout(()=>{
myDiv.addClass('rotated');
}, 1000);
div {
width: 100px;
height: 100px;
background-color: red;
transition: all 1s linear;
}
.rotated {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='my-div'>
</div>
Just use transition-duration property on the target :
$('#firstDiv').click(function() {
$(this).toggleClass('rotated');
});
#firstDiv {
width: fit-content;
transition-duration: 2s; /* <-- Provide a smooth animation from 2s on all 'changes'*/
}
.rotated {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transition: all 0.1s linear;
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<div id="firstDiv">
test
</div>
Related
Consider the following plunker example
I am trying to have the ng-repeat elements slide left upon ng-click
I can see that ng-click is updating model, but the animation is not applying for some reason.
Here is the css file
.slide-left {
-webkit-transition: -webkit-transform 1.4s ease-in-out;
-moz-transition: -moz-transform 1.4s ease-in-out;
transition: transform 1.4s ease-in-out;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.slide-left.ng-enter {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.slide-left.ng-enter.ng-enter-active {
position: absolute;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.slide-left.ng-leave {
position: absolute;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.slide-left.ng-leave.ng-leave-active {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
I verified that slide-left gets applied when I click the left arrow.
Can someone give me a hint?
Thanks
This is my first time using stackoverflow so please be patient with me, heh.
I'm a relative newbie when it comes to HTML, CSS and JS, but I gotta use them for work every now and then. Today I've applied Magnific Popup to a site I'm working on. I'm specifically trying to use the "Open with fade-zoom animation" example, and modify it to fit my needs of course. The popup is working, indeed, but the div for the popup box itself isn't hiding, despite having mfp-hide as its class. It's weird because the Dreamweaver preview does hide it, but Chrome does not (I'm on latest version of Chrome for Windows, if it helps.) Also, the lightbox that the Magnific Popup site displays behind every popup is nowhere to be seen.
Here's a jsfiddle with my code. The posting interface says I need to post my code here so here it goes:
Here's my HTML:
<div>
<a class="popup-with-zoom-anim" href="#dialog">
<span>CLICK HERE TO DISPLAY DIALOG</span>
</a>
</div>
<div id="dialog" class="zoom-anim-dialog mfp-hide">
<h1>DIALOG TITLE</h1>
<br><br>
<p>Dialog text</p>
</div>
My JS (located inside a script block right before my </body> tag)
$(document).ready(function() {
$('.popup-with-zoom-anim').magnificPopup({
type: 'inline',
fixedContentPos: false,
fixedBgPos: true,
overflowY: 'auto',
closeBtnInside: true,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-zoom-in'
});
});
And just in case, my CSS (located inside a style block right over the script block with the JS)
/* Styles for dialog window */
#dialog {
background: white;
padding: 20px 30px;
text-align: left;
max-width: 700px;
position: relative;
box-shadow: 1px 1px 10px 5px rgba(0,0,0,0.25);
left: 50%;
right: 50%;
z-index: 999;
top: 100px
}
/**
* Fade-zoom animation
*/
/* start state */
.my-mfp-zoom-in .zoom-anim-dialog {
display:block;
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
}
/* animate in */
.my-mfp-zoom-in.mfp-ready .zoom-anim-dialog {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
/* animate out */
.my-mfp-zoom-in.mfp-removing .zoom-anim-dialog {
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
opacity: 0;
}
/* Dark overlay, start state */
.my-mfp-zoom-in.mfp-bg {
opacity: 0;
-webkit-transition: opacity 0.3s ease-out;
-moz-transition: opacity 0.3s ease-out;
-o-transition: opacity 0.3s ease-out;
transition: opacity 0.3s ease-out;
}
/* animate in */
.my-mfp-zoom-in.mfp-ready.mfp-bg {
opacity: 0.8;
}
/* animate out */
.my-mfp-zoom-in.mfp-removing.mfp-bg {
opacity: 0;
}
That's all I've got. I'm sorry if this question's been answered already, I have not been able to find it. Let me know if there's anything else I can provide to help solve the problem. And thanks in advance for reading. Cheers.
I had a similar issue where the mfp-hide class did nothing. It was caused by not properly including Magnific Popup's css. Check to see if this is your root cause too. You can include the following:
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.1/magnific-popup.min.css" rel="stylesheet">
I have made an example of a card flip in JSFiddle for AngularJS.
It works perfectly in Chrome.
It works OK in Firefox.
It sort of works in IE, but not properly.
As soon as I remove the perspective css rule it works perfectly (with no perspective). If I add the -webkit- and -ie- rules it still doesn't work. IS THIS A BUG I IE.
I have used the ng-enter and ng-leave to make the transitions etc. Check JSFiddle for full code.
.serviceRoll{
margin:32px;
position: relative;
height:150px;
width:215px;
perspective:800px;
}
.rollInner {
background-color:lightgrey;
padding-top:50px;
height:100px;
width:215px;
text-align:center;
font-size:2em;
border-radius: 16px;
}
.roll {
position: absolute;
}
.roll.ng-enter {
-webkit-transition:0.25s ease all;
transition:0.25s ease all;
-webkit-transform: rotateX(-90deg);
transform: rotateX(-90deg);
z-index: 1;
}
.roll.ng-enter.ng-enter-active {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
}
.roll.ng-leave {
-webkit-transition:0.25s ease all;
transition:0.25s ease all;
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
z-index: -1;
}
.roll.ng-leave.ng-leave-active {
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
}
Where you have -webkit- also add a css rule for -ms- as well. You have added these rules in for webkit browsers but not for non-webkit browsers. Take a few of your css rules as an example. Something like this -
.roll.ng-enter {
-webkit-transition:0.25s ease all;
-ms-transition:0.25s ease all;
transition:0.25s ease all;
-ms-transform: rotateX(-90deg);
-webkit-transform: rotateX(-90deg);
transform: rotateX(-90deg);
z-index: 1;
}
.roll.ng-enter.ng-enter-active {
-webkit-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transition-delay: 0.25s;
-ms-transition-delay: 0.25s;
transition-delay: 0.25s;
}
.roll.ng-leave {
-webkit-transition:0.25s ease all;
-ms-transition:0.25s ease all;
transition:0.25s ease all;
-webkit-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
transform: rotateX(0deg);
z-index: -1;
}
You get the idea :)
Hope this helps!
I have a serious problem with Internet explorer.
I really need to use the scale function in my CSS, but the quality of the video is totally deteriorated.
It works fine with Chrome (and Firefox i think) but not with IE.
Are there any tips to make this better ?
I saw some css tips to change the quality of images but this doesn't work with videos.
Here is a code test (put the cursor over the video to scale it): http://jsfiddle.net/MxxAv/145/
HTML:
<video autoplay id="video" src="http://www.html5videoplayer.net/videos/toystory.mp4" poster="http://thumb.multicastmedia.com/thumbs/aid/w/h/t1351705158/1571585.jpg"></video>
CSS
#video {
width: 200px;
height: 113px;
}
#video:hover {
transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform: scale(2.3);
-webkit-transform: scale(2.3);
}
Thanks for your help !
Adding an original scale may help. Also, for cross-browser support, it helps to use all of the vendor prefixes. Notice, I moved the commands with no prefix to the bottom. Browsers apply the last usable command, so if a browser needs the prefix, you can simply move the prefixed command to the bottom. I added the vendor prefixes and scale to your code, and a duration just for kicks :)
#video {
width: 284px;
height: 160px;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-ms-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
}
#video:hover {
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scale(2.8);
-moz-transform: scale(2.8);
-ms-transform: scale(2.8);
-o-transform: scale(2.8);
transform: scale(2.8);
}
just wonder if i'm on the right track...and maybe some help
referring to this question
CSS Animation onClick
$(#alpha).onClick(function({
$('#alpha').addClass('.blowup');});
.blowup {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}
this isn't working -> http://jsfiddle.net/HQjMc/50/
something with z-index? i do have an a href onclick overlay that doesn't seem to affect the target iframe...thanks
Here is a CSS only solution:
HTML
<div id='alpha'>
<iframe src="http://time.is"></iframe>
</div>
CSS
#alpha {
opacity:0.38;
filter:alpha(opacity=38);
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
-moz-transform:scale(0.25);
-moz-transform-origin:0 0;
-o-transform:scale(0.25);
-o-transform-origin:0 0;
-webkit-transform:scale(0.25);
-webkit-transform-origin:0 0
}
#alpha:hover {
opacity:0.38;
filter:alpha(opacity=38);
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}
#alpha > iframe {
positon:fixed;
zoom:1;
}
Example
the fiddle
ps: this will not work on internet explorer