-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdemoTransition.html
111 lines (100 loc) · 4.46 KB
/
demoTransition.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
body { font-family: Arial; }
.items {
list-style-type: none; padding: 0; position: relative;
border: 1px solid black; height: 400px; overflow-y: auto; overflow-x: hidden;
width: 600px;
}
.items li {
height: 50px; width: 100%; line-height: 50px; padding-left: 20px;
border: 1px solid silver; background: #eee; box-sizing: border-box; -moz-box-sizing: border-box;
position: absolute; top: 0; left: 0;
-webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out;
}
.reorder { font-weight: bold; background-color: yellow; border: 1px solid silver; }
</style>
<body>
<ul class="items">
<li>Monday <a href="#" class="delete">delete</a></li>
<li>Tuesday <a href="#" class="delete">delete</a></li>
<li>Wednesday <a href="#" class="delete">delete</a></li>
<li>Thursday <a href="#" class="delete">delete</a></li>
<li>Friday <a href="#" class="delete">delete</a></li>
<li>Saturday <a href="#" class="delete">delete</a></li>
<li>Sunday <a href="#" class="delete">delete</a></li>
</ul>
<button class="append">Add item</button>
<button class="reorder">Random order</button>
<!--[if lte IE 9]><style type="text/css">
/* Old IE doesn't support CSS transform or transitions */
.items li { position: relative }
</style><![endif]-->
</body>
<script>
$(function() {
$(document.body).on("click", ".delete", function (evt) {
evt.preventDefault();
$(this).closest("li").remove();
});
$(".append").click(function () {
$("<li>New item</li>").insertAfter($(".items").children()[2]);
});
$(".reorder").click(function () {
$(".items li")
.snapshotStyles()
.tsort({ order: "rand" })
.releaseSnapshot();
});
// Workaround for Webkit bug: force scroll height to be recomputed after the transition ends, not only when it starts
$(".items").on("webkitTransitionEnd", function () {
$(this).hide().offset();
$(this).show();
});
});
function createListStyles(rulePattern, rows, cols) {
var rules = [], index = 0;
for (var rowIndex = 0; rowIndex < rows; rowIndex++) {
for (var colIndex = 0; colIndex < cols; colIndex++) {
var x = (colIndex * 100) + "%",
y = (rowIndex * 100) + "%",
transforms = "{ -webkit-transform: translate3d(" + x + ", " + y + ", 0); transform: translate3d(" + x + ", " + y + ", 0); }";
rules.push(rulePattern.replace("{0}", ++index) + transforms);
}
}
var headElem = document.getElementsByTagName("head")[0],
styleElem = $("<style>").attr("type", "text/css").appendTo(headElem)[0];
if (styleElem.styleSheet) {
styleElem.styleSheet.cssText = rules.join("\n");
} else {
styleElem.textContent = rules.join("\n");
}
}
createListStyles(".items li:nth-child({0})", 50, 1);
// Snapshotting utils
(function () {
var stylesToSnapshot = ["transform", "-webkit-transform"];
$.fn.snapshotStyles = function () {
if (window.getComputedStyle) {
$(this).each(function () {
for (var i = 0; i < stylesToSnapshot.length; i++)
this.style[stylesToSnapshot[i]] = getComputedStyle(this)[stylesToSnapshot[i]];
});
}
return this;
};
$.fn.releaseSnapshot = function () {
$(this).each(function () {
this.offsetHeight; // Force position to be recomputed before transition starts
for (var i = 0; i < stylesToSnapshot.length; i++)
this.style[stylesToSnapshot[i]] = "";
});
};
})();
</script>
</html>