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"
            }
        }
  })

转载于:https://www.cnblogs.com/xiongwei2017/p/6583441.html