Skip to content

Instantly share code, notes, and snippets.

@CezaryDanielNowak

CezaryDanielNowak/DOM-operations-on-animations.js

Created September 11, 2014 19:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save CezaryDanielNowak/47d6ebedf99a9ad4597b to your computer and use it in GitHub Desktop.
Save CezaryDanielNowak/47d6ebedf99a9ad4597b to your computer and use it in GitHub Desktop.
Download ZIP
[Archive]
Raw
DOM-operations-on-animations.js
<!doctype html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>:)</title>
<link href='//cdnjs.cloudflare.com/ajax/libs/normalize/2.1.3/normalize.min.css' rel='stylesheet' type='text/css'>
<style>
/* http://css3.bradshawenterprises.com/transitions/ */
body, html {
margin:0;
height:100%;
width:100%;
display:block;
}
.test {
width:50%;
height:70%;
float:left;
background: #AAA;
}
.test[data-case="2"] {
background: #AAF;
}
.control {
width:50%;
height:30%;
float:left;
background: #BBB;
}
.control[data-case="2"] {
background-color:#BBF;
}
.test > div {
width:10px;
height:10px;
margin:5px;
background-color:#FF3333;
float:left;
outline:0 solid cyan;
}
.animation {
-o-transition: all .5s linear;
-webkit-transition: all .5s linear;
transition: all .5s linear;
}
.animation.fadeIn {
opacity: 1;
}
.animation.fadeOut {
opacity: 0;
}
.animation.outlineOn {
outline-width: 5px;
}
.animation.outlineOff {
outline-width: 0;
}
.animation.rotateOn {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg)
}
.animation.rotateOff {
-moz-transform: rotate(0);
-webkit-transform: rotate(0);
-o-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0)
}
.animation.skewOn {
-moz-transform: skewX(45deg);
-webkit-transform: skewX(45deg);
-o-transform: skewX(45deg);
-ms-transform: skewX(45deg);
transform: skewX(45deg)
}
.animation.skewOff {
-moz-transform: skewX(0);
-webkit-transform: skewX(0);
-o-transform: skewX(0);
-ms-transform: skewX(0);
transform: skewX(0)
}
.animation.shadowOn {
-webkit-box-shadow: 0 0 5px 0 rgba(1,1,1,1);
box-shadow: 0 0 5px 0 rgba(1,1,1,1)
}
.animation.shadowOff {
-webkit-box-shadow:none;
box-shadow:none;
}
.animation.colorOn {
background-color:#00AAAA;
}
.animation.colorOff {
background-color:#FF3333;
}
.bouncingOn {
animation-duration: .3s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
animation-name: zoomInBounce;
}
@keyframes zoomInBounce {
from {
transform: scale(1);
}
30% {
transform: scale(1.1);
}
40% {
transform: scale(1.2);
}
50% {
transform: scale(1.3);
}
60% {
transform: scale(1.4);
}
70% {
transform: scale(1.3);
}
80% {
transform: scale(1.2);
}
90% {
transform: scale(1.1);
}
to {
transform: scale(1);
}
}
.dom-ops {
position:fixed;
bottom:0;
left:0;
width:100%;
text-align:center;
}
</style>
</head>
<body>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
var startDOMOperationCounter = function() {
var icount = 0;
$(document).bind('DOMSubtreeModified DOMNodeInserted DOMNodeRemoved DOMNodeRemovedFromDocument DOMNodeInsertedIntoDocument DOMAttrModified DOMCharacterDataModified', function(e){
icount++;
});
setTimeout(function() {
$('.dom-ops span').text(icount);
$(document).unbind('DOMSubtreeModified DOMNodeInserted DOMNodeRemoved DOMNodeRemovedFromDocument DOMNodeInsertedIntoDocument DOMAttrModified DOMCharacterDataModified');
}, 800);
};
$(function() {
// fill tests
$(Array( 600+1 ).join('<div></div>\n')).appendTo('.test');
var testElements = {
1: $('.test[data-case="1"] > div'), // 1=javascript
2: $('.test[data-case="2"] > div') // 2=css
};
var tests = {
'fadeIn': function() {
startDOMOperationCounter();
var el = $(this).closest('.control').data('case');
if(el == 1)
testElements[el].fadeIn(500);
else
testElements[el].attr('class', 'animation fadeIn');
},
'fadeOut': function() {
startDOMOperationCounter();
var el = $(this).closest('.control').data('case');
if(el == 1)
testElements[el].fadeOut(500);
else
testElements[el].attr('class', 'animation fadeOut');
},
'outlineOn': function() {
startDOMOperationCounter();
var el = $(this).closest('.control').data('case');
if(el == 1)
testElements[el].animate({
'outline-width':5,
}, 500);
else
testElements[el].attr('class', 'animation outlineOn');
},
'outlineOff': function() {
startDOMOperationCounter();
var el = $(this).closest('.control').data('case');
if(el == 1)
testElements[el].animate({
'outline-width':0
}, 500);
else
testElements[el].attr('class', 'animation outlineOff');
},
// NOT WORKING WITH JQUERY
'shadowOn': function() {
startDOMOperationCounter();
var el = $(this).closest('.control').data('case');
if(el == 1)
testElements[el].animate({
'box-shadow':'0 0 5px 0 rgba(1,1,1,1)'
}, 500);
else
testElements[el].attr('class', 'animation shadowOn');
},
'shadowOff': function() {
startDOMOperationCounter();
var el = $(this).closest('.control').data('case');
if(el == 1)
testElements[el].animate({
'box-shadow':'none'
}, 500);
else
testElements[el].attr('class', 'animation shadowOff');
},
'rotateOn': function() {
startDOMOperationCounter();
var el = $(this).closest('.control').data('case');
if(el == 1)
testElements[el].animate({
'transform':'rotate(360deg)'
}, 500);
else
testElements[el].attr('class', 'animation rotateOn');
},
'rotateOff': function() {
startDOMOperationCounter();
var el = $(this).closest('.control').data('case');
if(el == 1)
testElements[el].animate({
'transform':'rotate(0)'
}, 500);
else
testElements[el].attr('class', 'animation rotateOff');
},
'skewOn': function() {
startDOMOperationCounter();
var el = $(this).closest('.control').data('case');
if(el == 1)
testElements[el].animate({
'transform':'skewX(45deg)'
}, 500);
else
testElements[el].attr('class', 'animation skewOn');
},
'skewOff': function() {
startDOMOperationCounter();
var el = $(this).closest('.control').data('case');
if(el == 1)
testElements[el].animate({
'transform':'skewX(0)'
}, 500);
else
testElements[el].attr('class', 'animation skewOff');
},
'colorOn': function() {
startDOMOperationCounter();
var el = $(this).closest('.control').data('case');
if(el == 1)
testElements[el].animate({
'background-color':'#00AAAA'
}, 500);
else
testElements[el].attr('class', 'animation colorOn');
},
'colorOff': function() {
startDOMOperationCounter();
var el = $(this).closest('.control').data('case');
if(el == 1)
testElements[el].animate({
'background-color':'#FF3333'
}, 500);
else
testElements[el].attr('class', 'animation colorOff');
},
'bouncingOn': function() {
startDOMOperationCounter();
var el = $(this).closest('.control').data('case');
if(el != 1)
testElements[el].attr('class', 'animation bouncingOn');
},
'bouncingOff': function() {
startDOMOperationCounter();
var el = $(this).closest('.control').data('case');
if(el != 1)
testElements[el].attr('class', '');
}
};
for(var test in tests) {
$('<input type="button" value="'+test+'">')
.appendTo('.control')
.click(tests[test])
}
});
</script>
<div class="test" data-case="1"></div>
<div class="test" data-case="2"></div>
<div class="control" data-case="1">
</div>
<div class="control" data-case="2">
</div>
<div class="dom-ops">DOM Operations:<span> </span></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment