LoginSignup
0

More than 5 years have passed since last update.

riot.js animate.css と合わせる

Posted at

vueのように細かにはないので、animate.cssを使ってクラス操作をすることに成る。

<script src="//gnjo.github.io/riot.js"></script>
<link rel="stylesheet" href="//gnjo.github.io/animate.css"></link>
<anim></anim>
<style>
label{
 display:inline-block;
 padding:0.1rem;margin:0.1rem;
 background-color:whitesmoke;
}
label:hover{background-color:orange}
.orange{ color:orange} 
</style>
let data=`bounce    flash   pulse   rubberBand
shake   headShake   swing   tada
wobble  jello   bounceIn    bounceInDown
bounceInLeft    bounceInRight   bounceInUp  bounceOut
bounceOutDown   bounceOutLeft   bounceOutRight  bounceOutUp
fadeIn  fadeInDown  fadeInDownBig   fadeInLeft
fadeInLeftBig   fadeInRight fadeInRightBig  fadeInUp
fadeInUpBig fadeOut fadeOutDown fadeOutDownBig
fadeOutLeft fadeOutLeftBig  fadeOutRight    fadeOutRightBig
fadeOutUp   fadeOutUpBig    flipInX flipInY
flipOutX    flipOutY    lightSpeedIn    lightSpeedOut
rotateIn    rotateInDownLeft    rotateInDownRight   rotateInUpLeft
rotateInUpRight rotateOut   rotateOutDownLeft   rotateOutDownRight
rotateOutUpLeft rotateOutUpRight    hinge   jackInTheBox
rollIn  rollOut zoomIn  zoomInDown
zoomInLeft  zoomInRight zoomInUp    zoomOut
zoomOutDown zoomOutLeft zoomOutRight    zoomOutUp
slideInDown slideInLeft slideInRight    slideInUp
slideOutDown    slideOutLeft    slideOutRight   slideOutUp`
 .replace(/\n| |\t/g,',').split(',').filter(d=>d.length!=0)
;

riot.tag(
`anim`
,`<div><div class="{nowanim}" animationend={aniend}>test</div></div>
<label each="{item in opts.data}" onclick={click}>{item}</label>
`
,function(opts){
 let self=this,f=(d)=>{return 'animated '+d}
 self.nowanim=f('hinge')
 this.aniend=function(ev){ self.nowanim='orange' }
 this.click=function(ev){ self.nowanim=f(this.item)}
})
riot.mount('anim',{data:data})
;

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0