Jquery – css transitions

cssjquerytransitions

I've been building an iphone optimitized version of my site, and have been trying to get animations to work/transitions to work.

I looked at iui/ciui,etc.etc. but they seem like overkill for what I need. I'm using jquery and have most of the functionality built, except that I couldn't get .animate to work smoothly, so I'm trying css transitions.

I have a div which when an object within the div is clicked, I want the div to transition of the page left (standard iPhone UI).
So as I understand, you can't apply a css transition to a parent element onclick, so I add a class with jquery and the class has the css transition in it.

This works, with the exception that the only css transition that I could get to work is

-webkit-transform: translate(-330px, 0);

and I don't see a way to add a transition time to this, so this ends up being as effective as .hide().
Any ideas?

I couldn't really figure out how the other transitions worked.
like

 -webkit-transition-property:  left;
  -webkit-transition-duration:  4s;

how would I specify how far left (and I'm actually going negative numbers). Also, it didn't seem that this was triggered on the add-class.

I've looked at the http://webkit.org/specs/CSSVisualEffects/CSSTransitions.html, but couldn't figure out how to do this based on that documentation.

Thanks
Pete

Best Answer

Have a look at the Surfin' Safari blog:

I'm not completely sure that the iPhone supports all those techniques, but the probability is high.

Related Solutions

Html – Set cellpadding and cellspacing in CSS

Basics

For controlling "cellpadding" in CSS, you can simply use padding on table cells. E.g. for 10px of "cellpadding":

td { 
    padding: 10px;
}

For "cellspacing", you can apply the border-spacing CSS property to your table. E.g. for 10px of "cellspacing":

table { 
    border-spacing: 10px;
    border-collapse: separate;
}

This property will even allow separate horizontal and vertical spacing, something you couldn't do with old-school "cellspacing".

Issues in IE ≤ 7

This will work in almost all popular browsers except for Internet Explorer up through Internet Explorer 7, where you're almost out of luck. I say "almost" because these browsers still support the border-collapse property, which merges the borders of adjoining table cells. If you're trying to eliminate cellspacing (that is, cellspacing="0") then border-collapse:collapse should have the same effect: no space between table cells. This support is buggy, though, as it does not override an existing cellspacing HTML attribute on the table element.

In short: for non-Internet Explorer 5-7 browsers, border-spacing handles you. For Internet Explorer, if your situation is just right (you want 0 cellspacing and your table doesn't have it defined already), you can use border-collapse:collapse.

table { 
    border-spacing: 0;
    border-collapse: collapse;
}

Note: For a great overview of CSS properties that one can apply to tables and for which browsers, see this fantastic Quirksmode page.

CSS 100% height with padding/margin

I learned how to do these sort of things reading "PRO HTML and CSS Design Patterns". The display:block is the default display value for the div, but I like to make it explicit. The container has to be the right type; position attribute is fixed, relative, or absolute.

.stretchedToMargin {
  display: block;
  position:absolute;
  height:auto;
  bottom:0;
  top:0;
  left:0;
  right:0;
  margin-top:20px;
  margin-bottom:20px;
  margin-right:80px;
  margin-left:80px;
  background-color: green;
}

<div class="stretchedToMargin">
  Hello, world
</div>

Fiddle by Nooshu's comment

Best Answer

Related Solutions

Html – Set cellpadding and cellspacing in CSS

CSS 100% height with padding/margin

Related Topic