vue2项目当元素第二次出现在可视窗口中还能执行animate.css动画 代码怎么写

可以通过监听元素是否进入可视窗口，并添加相应的class来触发animate.css动画。

在Vue2中，可以使用vue-waypoint插件来实现监听元素是否进入可视窗口的功能。

1. 安装vue-waypoint插件

npm install vue-waypoint --save

2. 在组件中引入vue-waypoint插件

import Waypoint from 'vue-waypoint'

export default {
  components: {
    Waypoint
  },
  ...
}

3. 在元素上添加waypoint组件，并设置触发进入可视窗口的回调函数

<template>
  <div>
    <div class="box" v-waypoint="onWaypoint">
      ...
    </div>
  </div>
</template>

<script>
import Waypoint from 'vue-waypoint'

export default {
  components: {
    Waypoint
  },
  methods: {
    onWaypoint (direction) {
      if (direction === 'down') {
        // 元素进入可视窗口
        this.$refs.box.classList.add('animated', 'bounceIn')
      }
    }
  }
}
</script>

在上面的代码中，我们在box元素上添加了v-waypoint指令，并绑定了一个回调函数onWaypoint。当box元素进入可视窗口时，回调函数会被执行，我们可以在回调函数中添加相应的class来触发animate.css动画。

需要注意的是，在回调函数中我们判断了元素进入可视窗口的方向，这是为了防止动画重复触发。如果不加这个判断，元素离开可视窗口后再次进入时会重新触发动画。