riot-animation-context
Version:
animation-context Riot JS Tag animation context for dealing with css transitions and animated addition and removal of riot tags
91 lines (83 loc) • 2.66 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>manual test</title>
</head>
<body>
<view>
<div name="list">
<child-one></child-one>
</div>
</view>
<script type="riot/tag">
<child-one>
<animation-context animate-on-mount="false" animate-auto-in-delay="500" animate-auto-out-delay="500" animate-infinitely="false" animate-in="fadeInRight" animate-out="hinge">
<div class="thumb">
<a href="#" onclick="{ out }" title="click to remove">X</a>
</div>
</animation-context>
<style scoped>
:scope {
display: inline-block;
position: relative;
}
.thumb {
-webkit-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
border-radius: 1rem;
background: #FFC;
height: 6rem;
width: 6rem;
margin: 1rem;
position: relative;
}
.thumb a {
margin:0.3rem;
float: right;
color: #C33;
font-size: 0.7rem;
padding: 0.3rem;
background: #fff;
width: 1rem;
height: 1rem;
text-align: center;
}
.thumb a:hover {
background: #FF0;
}
</style>
</child-one>
</script>
<script type="riot/tag">
<view>
<a href="#" onclick="{ add }">ADD ONE</a>
<yield/>
<style scoped>
:scope {
font-family: sans-serif;
display: block;
margin: 0 auto;
width: 45%;
min-width: 300px;
max-width: 800px;
}
a {
text-decoration: none;
color: #AA9;
}
</style>
this.add = function(animation) {
var node = document.createElement("CHILD-ONE");
this.list.appendChild(node);
riot.mount(node);
}
</view>
</script>
<script src="//cdn.jsdelivr.net/riot/2.3/riot+compiler.min.js"></script>
<script src="../animation-context.js"></script>
<script>
riot.mount('view')
</script>
</body>
</html>