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
Related
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>
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
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I want to build a dropdown menu with jQuery like the following website did:
https://www.eataly.com/
Currently I am hanging on the dropdown animation. I have no idea how they do it and can't figure out how in their code.
My best idea was to slideDown every li element inside the ul of a main menu item. But that doesn't looks like that on the website.
I've uploaded the project here, on jsfiddle it doesn't works well as it in stand-alone site does.
https://github.com/tyurderi/jquery-menu
I'm glad if you can help me building this animation for my menu.
The "dropdown animation" on the main menu of the site you linked is achieved by CSS transformations, not jQuery.
Look at the code bit in media-queries.css file, starting from line 480:
/* menu desktop hover effects */
.js-opened-effect .nav-primary > li > ul{
display: block;
-webkit-transform: scaleY(0);
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-o-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: top;
-moz-transform-origin: top;
-ms-transform-origin: top;
-o-transform-origin: top;
transform-origin: top;
-webkit-transition: -webkit-transform 0.26s ease;
-moz-transition: -moz-transform 0.26s ease;
-ms-transition: -ms-transform 0.26s ease;
-o-transition: -o-transform 0.26s ease;
transition: transform 0.26s ease;
}
.js-opened-effect .nav-primary > li:hover > ul{
-webkit-transform: scaleY(1);
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-o-transform: scaleY(1);
transform: scaleY(1);
}
.js-opened-effect .nav-primary ul li > ul{
display: block;
-webkit-transform: scaleX(0);
-moz-transform: scaleX(0);
-ms-transform: scaleX(0);
-o-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: left;
-moz-transform-origin: left;
-ms-transform-origin: left;
-o-transform-origin: left;
transform-origin: left;
-webkit-transition: -webkit-transform 0.26s ease;
-moz-transition: -moz-transform 0.26s ease;
-ms-transition: -ms-transform 0.26s ease;
-o-transition: -o-transform 0.26s ease;
transition: transform 0.26s ease;
}
.js-opened-effect .nav-primary ul li.js-sub-opened:hover > ul,
.js-opened-effect .nav-primary > li.js-main-opened ul li.js-sub-opened:hover > ul{
-webkit-transform: scaleX(1);
-moz-transform: scaleX(1);
-ms-transform: scaleX(1);
-o-transform: scaleX(1);
transform: scaleX(1);
}
That's where you have to look if you want to replicate the functionality. Here is a minimal example on JSFiddle to prove that this is the bit that you're looking for.
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 am experimenting with css3 transitions and want to introduce an onClick event to trigger the transition instead of the pseudo hover class. The problem I have is that the transition is split onto two elements.
Here is the HTML:
<div class="box"><img src="images/1.jpg" width="300" height="200" alt=""/>
<div class="mask">
<!-- Further content goes here -->
</div>
</div>
And here is the CSS:
.box {
width: 300px;
height: 200px;
position: relative;
overflow: hidden;
border: solid 2px #E6171A;
}
.mask {
width: 300px;
height: 200px;
position: absolute;
top: 0;
left: 0;
background-color: #021288;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: scale(0) rotate(-360deg);
-moz-transform: scale(0) rotate(-360deg);
-o-transform: scale(0) rotate(-360deg);
-ms-transform: scale(0) rotate(-360deg);
transform: scale(0) rotate(-360deg);
-webkit-transition: all 0.4s ease-in;
-moz-transition: all 0.4s ease-in;
-o-transition: all 0.4s ease-in;
-ms-transition: all 0.4s ease-in;
transition: all 0.4s ease-in;
}
.box:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=40)";
filter: alpha(opacity=40);
opacity: .4;
-webkit-transform: scale(1) rotate(0deg);
-moz-transform: scale(1) rotate(0deg);
-o-transform: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
-webkit-transition-delay: .4s;
-moz-transition-delay: .4s;
-o-transition-delay: .4s;
-ms-transition-delay: .4s;
transition-delay: .4s;
}
.box img {
-webkit-transition: all 0.4s ease-in-out 1.3s;
-moz-transition: all 0.4s ease-in-out 1.3s;
-o-transition: all 0.4s ease-in-out 1.3s;
-ms-transition: all 0.4s ease-in-out 1.3s;
transition: all 0.4s ease-in-out 1.3s;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.box:hover img {
-webkit-transform: translateX(300px);
-moz-transform: translateX(300px);
-o-transform: translateX(300px);
-ms-transform: translateX(300px);
transform: translateX(300px);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition-delay: .8s;
-moz-transition-delay: .8s;
-o-transition-delay: .8s;
-ms-transition-delay: .8s;
transition-delay: .8s;
/* the delay goes in the hover(action state) to overide the delay in the original state */
}
So the question is how do I apply the onClick event to a transition that is spread over two elements? Hope someone can help!
Substitute :hover with a class, something like clicked
.box.clicked
Then on click, use addClass to add that the clicked class to .box. That change should trigger the animation originally done by :hover.
Here's an example using toggleClass to add/remove the class on click and change the height of the div.