css-transitions | 易学教程

Issue on Adding Animation Between Adding and Removing Two Classes

阅读更多关于 Issue on Adding Animation Between Adding and Removing Two Classes

Can you please take a look at this demo and let me know why I am not able to generate smooth transition (something like Smooth Scroll) between adding and removing two classes fixed-top and fixed-bottom while I already added following css roles into them? -webkit-transition: all 3s ease; -moz-transition: all 3s ease; -o-transition: all 3s ease; transition: all 3s ease; var lastScrollTop = 0; $(window).scroll(function(event) { var st = $(this).scrollTop(); if (st > lastScrollTop) { if (st > 500) { $('.box').removeClass("fixed-bottom").addClass("fixed-top"); } } else { if (st < 500) { $('.box')

Is there a more efficient way to do multi-step animations?

阅读更多关于 Is there a more efficient way to do multi-step animations?

问题 Im trying to make transitions very similar to what I have in the code example below. It works pretty well here, but when I use it on the real site it almost never works. Some transition-delays seem to be skipped and its not smooth like in this simplified example. On the site i'm trying to make this as part of a slideshow transition so other transitions are happening at the same time so i'm thinking the GPU can't handle the way I have it set up. Is there another way to accomplish this so that

Opposite of jQuery.camelCase for CSS property names

阅读更多关于 Opposite of jQuery.camelCase for CSS property names

问题 jQuery.camelCase is used to convert dashed CSS properties to camelcased CSSOM(? or DOM?) properties. I'd like to do the opposite to dynamically create a CSS transition value. I don't want to use the all keyword for this. I'd like to make it possible to not force the coder to only use background-color instead of backgroundColor . Is this possible (maybe via jQuery) or will it take lots of code for cross browser support? Edit: $("#example").css("transition-property", "backgroundColor") // Fail

Trigger an event each time an item scrolls into viewport

阅读更多关于 Trigger an event each time an item scrolls into viewport

问题 I have some items on a page. When they scroll into view, I add animation classes to them, like this: $(window).scroll(function() { var topOfWindow = $(window).scrollTop(), bottomOfWindow = topOfWindow + $(window).height(); $('.buckle').each(function(){ var imagePos = $(this).offset().top; if (imagePos < topOfWindow+400) { $(this).addClass('animate'); } }); }); Here's a stripped-down JSFiddle demo This triggers the animation to occur one time per page load: when the image is 400px from the top

jQueryMobile page transition not loading page as it should

阅读更多关于 jQueryMobile page transition not loading page as it should

问题 I am trying to load a page with transition effect on click of a link. I have used jQuery Mobile . Below is my code. <a href="index.html" data-transition="slide">Transition</a> On click of Transition link index.html page should be loaded showing transition effect. Below is the output of index.html that I am trying to load. But problem is that when I click Transition link the index page is not loaded as expected. The loaded page looks like below. When I looked through firebug what is happening,

Is it possible to combine translateX/translateY and scale in single CSS transition?

阅读更多关于 Is it possible to combine translateX/translateY and scale in single CSS transition?

问题 I have been playing around with looping of CSS transitions (following this article). The transition itself could be divided into 4 (looped) phases: shrinked2=>expanded=>expanded2=>shrinked These states are represented by 4 classes: shrinked2 - stateOne expanded - stateTwo expanded2 - stateThree shrinked2 - stateFour I am, initially, setting the width and height of my element, being transitioned, in percents via id. Then, to trigger transition, I am changing transform: scale via state classes,

How do I animate a clicked link before leaving page?

阅读更多关于 How do I animate a clicked link before leaving page?

问题 Here's what I want to achieve: When an HTML link is clicked, I want to animate it before leaving the page If the link is opened in a new window/tab, the animation should not take place How on earth do I achieve this? 回答1: You could use javascript $(function(){ $(".btn").bind("click",function(){ $(this).animate({'left': '100px'}, 100, function(){ window.location.href = index.html }) }) }) But you'll have to stop the default action if your button is a link. 回答2: You'll need to capture the click

How change css using variables to make an animation

阅读更多关于 How change css using variables to make an animation

问题 How can I transition CSS values using JavaScript? I made this code, but it isn't working: var num = 100; function fillDiv{ var a=document.getElementById("principal"); for (var i = 0; i<100; i++){ num=num-25; a.style.background="-moz-radial-gradient(#FFFFFF "+num+"%, #006699 200%);"; if (num==0){ break; } } In the debug window all gone good, but when I check it on elements tag the value hasn't changed. 回答1: As explained in comments, the for loop is too quick to notice the effect, Instead you

3D transforms (translate3D) appear to be causing sluggish jQuery animations on mobile devices

阅读更多关于 3D transforms (translate3D) appear to be causing sluggish jQuery animations on mobile devices

问题 I am using a CSS translate 3D and scale 3D for a responsive navigation menu. On touch devices, more specifically, iPhone, it is causing separate jQuery animations on the same page to perform sluggishly, almost as if it strobes when animating. Can anyone shed any light on this issue? If it is of any relevance, I am using SASS: nav { left: 0; @include transform( translate3d(-100%, 0, 0) ); @include backface-visibility; .nav__block { @include transition( -webkit-transform 500ms ease ); @include

3D transforms (translate3D) appear to be causing sluggish jQuery animations on mobile devices

阅读更多关于 3D transforms (translate3D) appear to be causing sluggish jQuery animations on mobile devices

I am using a CSS translate 3D and scale 3D for a responsive navigation menu. On touch devices, more specifically, iPhone, it is causing separate jQuery animations on the same page to perform sluggishly, almost as if it strobes when animating. Can anyone shed any light on this issue? If it is of any relevance, I am using SASS: nav { left: 0; @include transform( translate3d(-100%, 0, 0) ); @include backface-visibility; .nav__block { @include transition( -webkit-transform 500ms ease ); @include transition-delay( ease, 0s ); @include transform( translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9) );