wow.js 造成animation.css动画失效？

Question

使用wow.js和animate.css 动画失效
在页面中设置动画后
左侧img直接隐藏! 此时控制台中visibility为hideeon，animation-name为none

感觉像是wow.js造成的但是不知道应该怎么去调求大佬们帮帮忙！

Answer 1

看起来应该不是 wow.js 导致的问题。
下面是我复现的一个例子，没有遇到你说的问题。所以最好OP能提供一个自己的复现例子。

🔗 CodePen Demo

以防打不开在线Demo，以下是示例代码块：

<div id="app">
   <div v-for="index in 10" :key="index" class="item">
      <div class="item-left wow animate__animated animate__fadeInRight"  :data-wow-delay="index">
        <div class="item-left-color"></div>
      </div>
      <div class="item-right">
        <p>{{ index }}+</p>
        <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
      </div>
   </div>
</div>
<link rel="stylesheet" href="/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="/libs/animate.css/4.1.1/animate.min.css">
<script src="/libs/vue/2.6.11/vue.min.js"></script>
<script src="/libs/wow/1.1.2/wow.min.js"></script>

var app = new Vue({
  el: '#app',
  mounted() {
    new WOW({
      boxClass: 'wow',
      animateClass: 'animated',
      offset: 150,
      mobile: true,
      live: true,
      callback: function (c) {
        console.log(c, 'sss')
      },
      scrollContainer: null,
      resetAnimation: true
    }).init();
  },
})

// stylus
#app
  height 500vh
  padding-top 85vh
.item 
  display flex
  margin 10px
  &-left
    width 30px
    margin-right 10px
    flex 0 0 auto
    &-color
      height @width
      background skyblue