animate.css在vue项目中的使用

红太狼 2023-06-12 09:29 1阅读 0赞

<template>
      <div class="content">
        1.你要先下载：animate.css
        npm方式：npm install animate.css --save
    
        2.下载成功后来到main.js中
        import animated from 'animate.css'
        Vue.use(animated)
    
        3.现在你就可以在模板中去使用了
        <div @click="clickData">
          点击我
        </div>
    
        
        
        
        
        <transition enter-active-class="animated rubberBand" leave-active-class="animated bounceInRight">
          <h1 v-if="result">动画效果：体现enter-active-class 和 leave-active-class</h1>
        </transition>
    
        
        <transition enter-active-class="rubberBand" leave-active-class="bounceInRight">
          <h1 v-if="result" class="animated">动画效果：体现enter-active-class 和 leave-active-class</h1>
        </transition>
    
        
        <transition enter-active-class="rubberBand" leave-active-class="bounceInRight" :duration="1000">
          <h1 v-if="result" class="animated">动画效果：体现duration</h1>
        </transition>
    
        
        <transition enter-active-class="rubberBand" leave-active-class="bounceInRight" :duration="{enter:400,leave:2000}">
          <h1 v-if="result" class="animated">动画效果：体现duration分别设置 入场 和 离场 时候的动画时长</h1>
        </transition>
      </div>
    </template>
    
    <script>
      export default {
        name: 'HelloWorld',
        data() {
          return {
            result: false
          }
        },
        methods: {
          clickData() {
            this.result = !this.result
          }
        }
      }
    </script>
    
    
    <style scoped>
    
    </style>

### **animate.css官方地址（效果查看）：[https://daneden.github.io/animate.css/][https_daneden.github.io_animate.css]** ###

[https_daneden.github.io_animate.css]: https://daneden.github.io/animate.css/