Skip to content
This repository has been archived by the owner on Oct 8, 2021. It is now read-only.

Adding webkit animations to listviews #675

Closed
wants to merge 3 commits into from
Closed

Adding webkit animations to listviews #675

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
efb5032
Added listview animations: swing and blind-down
grandecomplex Dec 13, 2010
a54f0e9
Adding all the files necessary for listview animations
grandecomplex Dec 13, 2010
fcdbadc
Removed console log
grandecomplex Dec 14, 2010
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/lists/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ <h1>Lists</h1>
<li><a href="lists-search.html">Search filter bar</a></li>
<li><a href="lists-inset.html">Inset styled lists</a></li>
<li><a href="lists-performance.html">List performance test</a></li>
<li><a href="list-animations.html">Animation Lists</a></li>
<li><a href="lists-themes.html">Theming lists</a></li>
<!--<li><a href="api-lists.html">API documentation</a></li>-->
</ul>
Expand Down
52 changes: 52 additions & 0 deletions docs/lists/list-animations.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery Mobile Docs - Lists</title>
<link rel="stylesheet" href="../../themes/default" />
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
<script type="text/javascript" src="../../js/"></script>
</head>
<body>

<div data-role="page" data-theme="b">

<div data-role="header" data-theme="b">
<h1>Lists Animations</h1>
</div><!-- /header -->

<div data-role="content">

<p>Animations are cool, enough said. Currently works best with lists already in the DOM, not in seperate HTML files.</p>

<h2>Blind Down</h2>
<p>To add, use the <code>animation-type="blind-down"</code> on the list's <code>ul</code>.</p>
<ul data-role="listview" data-inset="true" animation-type="blind-down">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
</ul>

<h2>3D Swing (Works only on iOS Devices &amp; Safari)</h2>
<p>To add, use the <code>animation-type="swing"</code> on the list's <code>ul</code>.</p>
<ul data-role="listview" data-inset="true" animation-type="swing">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
</ul>

</div><!-- /content -->
</div><!-- /page -->



</body>
</html>
1 change: 1 addition & 0 deletions js/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
'jquery.mobile.fieldContain.js',
'jquery.mobile.listview.js',
'jquery.mobile.listview.filter.js',
'jquery.mobile.listview.animation.js',
'jquery.mobile.dialog.js',
'jquery.mobile.navbar.js',
'jquery.mobile.grid.js'
Expand Down
76 changes: 76 additions & 0 deletions js/jquery.mobile.listview.animation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
(function($) {
$.fn.swing = function() {

return this.each(function() {
var $this = $(this);
$this.addClass("swing-wrapper no-border");

$this.children("li").each(function(i, el) {
$(this).css("-webkit-animation-duration", ((.3/$(this).length)*(i+1))+"s");
});

$(this).closest(".ui-page").bind("pageshow", function() {
$this.addClass("go");
});
$(this).closest(".ui-page").bind("pagehide", function() {
$this.removeClass("swing-wrapper no-border go");
});

});
};

// Blind Down

var methods = {
down : function( ) {
var myheight = function(element) {
var h = window.getComputedStyle(element).height;
h = parseFloat(h);
return h;
}
var blindDown = function($this) {
var children = $this.children(),
lastElHeight = 0,
totalHeight = 0;

$this.addClass("blindDown-wrapper no-border");
children.each(function(i, el) {
$(el).css({
"webkitTransform": "translate(0px, "+totalHeight + "px)",
"opacity": 1
});
lastElHeight = myheight(el);
totalHeight+=lastElHeight;
});
$this.css("height", totalHeight+15);
totalHeight = lastElHeight = 0;
}

return this.each(function() {
var first = 0;
var $this = $(this);
$this.closest(".ui-page").bind("pageshow", function() {
blindDown($this);
});

$(this).closest(".ui-page").bind("pagehide", function() {
$this.removeClass("blindDown-wrapper no-border");
});

});
}
};

$.fn.blind = function(method) {
// Method calling logic
if ( methods[method] ) {
return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + method + ' does not exist on jQuery.blind' );
}
};
})(jQuery);


13 changes: 13 additions & 0 deletions js/jquery.mobile.listview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,6 +161,19 @@ $.widget( "mobile.listview", $.mobile.widget, {
li = $list.children( "li" ),
counter = $.support.cssPseudoElement || !$.nodeName( $list[0], "ol" ) ? 0 : 1;

var animationType = $list.attr("animation-type");
if (animationType != "undefined") {
switch(animationType) {
case "blind-down":
$list.blind("down");
break;
case "swing":
$list.swing();
break;
}
}


if ( counter ) {
$list.find( ".ui-li-dec" ).remove();
}
Expand Down
29 changes: 29 additions & 0 deletions themes/default/jquery.mobile.listview.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,4 +40,33 @@ ol.ui-listview .ui-li-jsnumbering:before { content: "" !important; } /* to avoid
/* Odd iPad positioning issue. */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
.ui-li .ui-btn-text { overflow: visible; }
}

.no-border {border: none !important; -webkit-border-radius: 0 !important; -webkit-box-shadow: none !important; }
/* listview animations */
div[data-role=page] {-webkit-transform-style: preserve-3d;}

/* 3D Swing Listview */
.swing-wrapper {-webkit-perspective: 500;}
.swing-wrapper li {-webkit-transform: rotateY(0deg);}
.swing-wrapper.go li {
-webkit-transform-origin: right;
-webkit-animation-name: rotate-in;
-webkit-transition-timing-function: ease-out, cubic-bezier(0.5, 0.2, 0.3, 1.0);
}
@-webkit-keyframes rotate-in {
0% {-webkit-transform: rotateY(-90deg);opacity: 0; }
100% {-webkit-transform: rotateY(0deg); opacity: 1;}
}

/* Blind Down */

.blindDown-wrapper {-webkit-perspective: 1300;}
.blindDown-wrapper > li {
opacity: 0;
-webkit-transition: 1s ease-in-out; position: absolute;
}

.ui-listview > li {
width: 100%;
}