useless
Version:
Use Less. Do More. JavaScript on steroids.
46 lines (32 loc) • 1.31 kB
HTML
<html>
<head>
<meta charset="utf-8"></meta>
<title>Node+ animation test</title>
<script src="../build/useless.client.js"></script>
<script src="../build/useless.devtools.js"></script>
</head>
<style>
@keyframes slide-to-right {
0% { transform: translate(0,0); opacity: 1; }
100% { transform: translate(100%,0); opacity: 0; } }
[slide-to-right] { animation: slide-to-right 1s ease-in-out; }
[slide-from-right] { animation: slide-to-right 1s ease-in-out; animation-direction: reverse; }
</style>
<script>
document.ready (function () {
var div =
N.div.css ({
position: 'fixed', left: '0px', top: '0px', width: '100px', height: '100px', background: 'red' }).appendTo (document.body)
var animate = function () {
div.animateWithAttribute ('slide-to-right').then (function () {
div.style.background = 'blue'
div.animateWithAttribute ('slide-from-right').then (function () {
div.style.background = 'green' })
})
}
div.touched (animate); animate ()
})
</script>
<body>
</body>
</html>