animate与jquery和vue.js的混合应用

animate.css库和jquery的组合应用

其实很简单,只需要把要动画的标签先挂一个animated的class再addClass

  <h1 class="animated">我是个h1标签</h1>
  <input type="button" name="" value="button">
  <script type="text/javascript">
  	$(function(){
        $("input[type='button']").click(function(){
        	// alert(1)
        	$('h1').addClass('hinge')
        })     
  	})
  </script>

animate.css和vue的组合

用法:使用之前,对动画的标签必须先挂上
v-show="show" class="animated" transition="boe"这3条属性,transition取名字可随意,然后在Vue上添加transitions这个json

  new Vue({
    transitions:{//定义所有动画名称
        	boe:{比如叫boe
        		enterClass:"hinge",
        		leaveClass:"zoomOutRight"
        	},
        	aa:{
        		enterClass:"rollIn",
        		leaveClass:"rollOut"
        	}
        }
  })
posted @ 2017-03-20 03:14  judy201654321  阅读(1145)  评论(0编辑  收藏  举报