vue 1.0 结合animate.css定义动画效果

下面是“vue 1.0 结合animate.css定义动画效果”的完整攻略：

1. 安装animate.css

首先需要安装animate.css，可以通过npm或者cdn方式引入：

NPM 安装

npm install animate.css --save

CDN 引入

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css" />

2. 引入animate.css

在Vue中使用animate.css需要在组件中引入，可以通过以下方法引入animate.css：

import 'animate.css';

3. 定义动画效果

使用animate.css可以让我们方便地定义动画效果，所有的动画效果都是以预定义的类名来实现的。例如，如果需要定义一个淡入淡出的效果，可以使用以下类名：

<div class="animated fadeIn"></div>

4. 触发动画效果

为了触发动画效果，我们需要使用Vue提供的transition组件包裹动画元素，并设置动画的名称。在Vue中，我们可以使用v-transition来设置动画名称。

下面是两个示例：

示例1: 淡入淡出效果

<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <transition name="fade">
      <p class="animated" v-show="show">这是一个淡入淡出的效果</p>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false
    };
  }
};
</script>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity .5s; /*设定动画持续时间，这里设置为0.5秒*/
}

.fade-enter,
.fade-leave-to /* .fade-leave-active 因为vue的过渡是先添加类，完成后再移除，所以动画类需要在leave-to时才生效 */ {
  opacity: 0; /*设定动画结束状态*/
}
</style>

示例2: 抖动效果

<template>
  <div>
    <button @click="shake()">Shake it</button>
    <div class="box animated" :class="{ shake: shaking }">
      这里是动态抖动的效果
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      shaking: false
    };
  },
  methods: {
    shake() {
      this.shaking = true;
      setTimeout(() => {
        this.shaking = false;
      }, 1000);
    }
  }
};
</script>

<style scoped>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
}

.shake {
  animation: shake .5s;
}

@keyframes shake {
  0% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(-5px, 0);
  }

  50% {
    transform: translate(0, 0);
  }

  75% {
    transform: translate(5px, 0);
  }

  100% {
    transform: translate(0, 0);
  }
}
</style>

以上就是使用vue 1.0结合animate.css定义动画效果的完整攻略。