jQuery Slidetoggle Rotate 45deg and back - javascript

I am trying to make the element rotate 45ยบ on click action, the toggle element should open.
If you click on it again I want it to rotate back and the toggle element should close.
I have tried a lot of codes, I would like to keep it as simple as possible.
Plugin I am using
jQuery:
$(".category-desc-toggle").click(function () {
$('.category-desc').slideToggle(300);
$(".category-desc-toggle").toggleClass("rotate45");
});
Css:
.rotate45 {
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
.category-desc-toggle {
-moz-transition: all .3s;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
What am I doing wrong? Is there an easier way(Less code)?

Indeed JuanT is right that CSS3 can accomplish the transformation, See Firefox MDN Link for more info.
jsFiddle: http://jsfiddle.net/7K6GP/4/
<div class="description-wrapper">
<div class="category-desc-toggle rotate"></div>
<div class="category-desc">Just Some Description</div>
</div>
<script>
$(".description-wrapper").click(function() {
$(this).children('div.category-desc').slideToggle(300);
$(this).children('div.category-desc-toggle').toggleClass("rotate45");
});
</script>

Without knowing your requirements, its hard to give you a full answer. Though, this can be accomplished with css3's rotate and transition property.
transform: rotate(45deg);
I have created a jsfiddle demonstrating this. http://jsfiddle.net/hGZbW/
EDIT:
If anyone is trying to accomplish this without CSS, there is a jquery plugin that supports most major browsers. To accomplish this affect for IE you would need to use the matrix filter.
https://github.com/heygrady/transform/wiki

Related

CSS Transform rotate works only on Firefox

I already widely searched on Google and Stackoverflow, but couldn't find a solution.
I made a simple mobile menu with some cool animations.
Here is the codepen: Codepen link
The problem should be in these lines, but I don't understand what's wrong.
.menu a:hover:before {
right: 100%;
visibility: visible;
-webkit-transform: scaleY(1) rotate(360deg);
transform: scaleY(1) rotate(360deg);
}
When you hover the menu, the bars rotate (and it works even on chrome and opera) and change color. If you click it, they rotate again to form a X (and it works even on chrome and opera).
When the menu appears, if you hover the links there's a bar that (should) rotate and go from right to left. If you do it in Firefox it works fine, the bars on the links appears smoothly and rotate from right to left, if you do it on Chrome or Opera, they just appear in the middle and go straight to the left.
Check the codepen, I already inserted browser keywords (i.e. -webkit-) and tried some options but no way to make it working.
Thanks in advance!
.menu a:before {
-webkit-transform: scaleY(0) rotate(0deg);
transform: scaleY(0) rotate(0deg);
-webkit-transition: all 1s ease-in-out 0s;
transition: all 1s ease-in-out 0s;
}
.menu a:hover:before {
right: 100%;
visibility: visible;
-webkit-transform: scaleY(1) rotate(360deg);
transform: scaleY(1) rotate(360deg);
}
works for me if i add rotate(0deg) to the "default" state of the before pseudo element

append css style to add dynamic transform translate

I have a page with a collection of about 5 images, all scattered on the page with various absolute positions and somewhat varying sizes. My goal is to translate the images to the center of the screen using css and the hover event.
Here is my css so far:
.bbimage{
z-index: 1;
-webkit-transition: -webkit-transform 0.8s ease;
-moz-transition: -moz-transform 0.8s ease;
transition: transform 0.8s ease;
.bbimage:hover{
position:absolute !important;
/*left:50% !important;
top:250px !important; <-very jittery and choppy */
-ms-transform: scale(3) rotate(0deg)!important;
-webkit-transform: scale(3) rotate(0deg)!important;
transform: scale(3) rotate(0deg)!important;
z-index: 3;
cursor: pointer;
}
.bbplaceholder:hover + .bbimage{
position:absolute !important;
left:50% !important;
top:250px !important;
-ms-transform: scale(3) rotate(0deg) !important;
-webkit-transform: scale(3) rotate(0deg) !important;
transform: scale(3) rotate(0deg) !important;
z-index: 3;
cursor: pointer;
}
Originally I was using simple transitions, but I found them to be choppy and jittery, especially in chrome. I ended up switching to transforms, which works great for the scaling and rotation, but I'm left with two problems.
This first problem, it that the transform: translate specifies a relative translation, not to an absolute position. The second problem is the potential variable screen sizes.
My current attack plan it to append the css style using Jquery so as to specify a calculated relative translate to the window center.
Here's what I have:
<script>
$( document ).ready(function() {
$('.bbimage:hover').css('-webkit-transform','translate(500px, 500px)');
});
</script>
This doesn't appear to do anything and I'm not sure what I'm doing wrong. I'm really new to css, and moderately new to Jquery. Obviously, this is just a preliminary test to see if I can append the CSS, and I haven't calculated the window center yet.
The jquery .css method will add the styles on the element's style property and this cannot handle :hover events.
These should be added dynamicaly in a css stylesheet to work.
See here how to add dynamic stylesheet in javascript

Page transition animation similar to Medium.com

I'm trying to find out how does medium do the animation when you click the bottom button to load the next article.
To see it, please head over to a Medium article, scroll to bottom and click to go to the next article.
I know how to use AJAX to load another page, but how can I use a similar animation ? I've searched through their code, but couldn't find it.
is similar to jquery pop effect
http://view.jquerymobile.com/1.3.2/dist/demos/widgets/transitions/
try pop effect on page.
it is just a css transition combination of scale and fade;
You can try to achieve the same effect using combination of css-animations and javascript. As a starting point you can look at effeckt.css it's a collection of css animations. Unfortunately it doesn't contain exact animation, so I've tried to reproduce it in this fiddle
The basic idea is to use two effects scaleDownFromFront and slideFromBottom:
#keyframes scaleDownFromFront {
to {
-webkit-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
}
}
#keyframes slideFromBottom {
from {
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
}

CSS3 transforms cause screen flickering or aliased font

I am trying to apply some CSS3 transformations on elements and there is two problems.
The webpage contains lots of sticky notes and I want to zoom on click (scale) or flip on hover (rotateY) them by applying CSS classes with some JavaScript.
For example the zoom class is like this :
.postit-container.enabled {
z-index: 15;
-webkit-transition: -webkit-transform 0.15s ease-in-out;
-moz-transition: -moz-transform 0.15s ease-in-out;
-o-transition: -o-transform 0.15s ease-in-out;
-ms-transition: -ms-transform 0.15s ease-in-out;
transition: transform 0.15s ease-in-out;
-webkit-transform: scale(1.25);
-moz-transform: scale(1.25);
-o-transform: scale(1.25);
-ms-transform: scale(1.25);
transform: scale(1.25);
}
For the flip effect I only use rotateY(180deg) on :hover.
Every stickies has a default rotation of 6deg applied and I fake random rotation with the nth-child CSS3 selector to apply different rotations.
Problem is that the screen flickers randomly when zooming or flipping and some fonts on the page are altered and looks ugly but not all of them, that's really weird.
Here is a jsfiddle so you can see the problem yourself :
JSfiddle (tested with Google Chrome 12.0.742.122 on Mac OS X 10.6.8)
I already tried the -webkit-backface-visibility trick, the flicker is gone on aminations and transforms for sure but fonts look ugly all the time.
I hope someone has a magic trick, because I really don't understand this behavior.
Could you put examples into a jsfiddle, the screenshots do not do a good job of illustrating the problem.
However I have experienced a similar problem, I couldn't find the cause of the problem either. Or come up with an explanation as to what might be happening.
However I did find a solution that worked in my case.
-webkit-transform-style: preserve-3d;
I applied it on all the elements that seemed to have rendering issues. In my case some elements that where not being transitioned or even in the same container, where being effected in a seemingly random and inconsistent manner.
something like.
.header *, .sticky * {
-webkit-transform-style: preserve-3d;
}
I would love provide an explanation as to what preserve-3d does, however I found the documentation pretty ambiguous.
About the crux of what I gathered is that it may fix the problem ( which it did ) and it has two properties
-webkit-transform-style: preserve-3d;
//and
-webkit-transform-style: flat;
Flat is used by default.
Sorry I could not give a more detailed answer, but I hope this fixes the problem for you.
If anyone working on webKit is around, can you provide and explanation as to what this really does.
Try to add the following to your CSS:
-webkit-transform: translateZ(0);
this will force Hardware Acceleration for chrome, since chrome often decides to not use it based on the CSS
I have the same problem.
Found solution very long time, but finally I found it.
Just add class .no-flickr to any problem object on your site and you see correct animation without any bugs.
See this http://jsfiddle.net/DaPsn/92/
.no-flickr {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
I see your text is just antialiased. Try to add 3d transform for example rotateZ(0) to fix that.

google plus photo animation with css3 or jquery?

so heres the animation
into
and this one
how can they do that?
1. re-size animation
2. stack and animate.
just CSS3 ? any example?
Thanks
Adam Ramadhan
To answer your question:
To resize and make image animate ( zoom in effect ) you should use something like :
ul#pics li:hover {
-moz-transform: scale(1.1) rotate(0deg);
-webkit-transform: scale(1.1) rotate(0deg);
-o-transform: scale(1.1) rotate(0deg);
-ms-transform: scale(1.1) rotate(0deg);
transform: scale(1.1) rotate(0deg);
}
For stack and animate, you should use CSS3 and jQuery.
On my machine using Chrome, I see a CSS3 -webkit-transform. Since that's the only transform they're using, it must be detecting that my browser is webkit and choosing the right way to transform. They probably have various other techniques for other browsers.
However, there's no jQuery fallback, as the page doesn't use jQuery; there's probably a different JavaScript fallback developed by Google though.
Is this something you are looking for?

Categories

Resources