<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'>
</head>
<body>
<div class='container'>
<my-tag></my-tag>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/riot@3.5/riot+compiler.min.js"></script>
<script src="https://cdn.rawgit.com/riot/animore/master/riot-animore.js"></script>
<script type="riot/tag" src="tags/my-tag.tag"></script>
<script type="text/javascript">
riot.mount('*')
</script>
</body>
</html>
<my-tag>
<h3>ifのアニメーション</h3>
<div class='row'>
<div class='col-sm-3'>
<button class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off" onclick={toggle}>
toggle
</button>
</div>
<div class='col-sm-9'>
<!-- アニメーション付きで表示・非表示をする-->
<div if={ isVisible } data-is="animore"
mount={{ duration: 500,rotateY :[-270,0],scale:[0.8,1],opacity:[0,1],maxHeight:[0, '500px'],easing: 'linear' }}
unmount={{duration: 500,opacity:0,scale:1.2,maxHeight:[ '500px',0],easing: 'linear' }}>
<card></card>
</div>
</div>
</div>
<script>
// カードの表示・非表示の制御
this.isVisible = true
toggle() {
this.isVisible = !this.isVisible
}
this.messages = [{
name: 'hoge',
msg: 'hogehoge'
}];
// 吹き出しの追加
add() {
this.messages.push({
name: 'hoge',
msg: 'hogehoge'
});
}
remove() {
this.messages = [];
}
</script>
</my-tag>
<card>
<!-- ただのカード-->
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="https://cdn.pixabay.com/photo/2017/07/29/04/46/morning-2550628__340.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</card>