Vuejs Animate.css 不工作

Question

Vuejs 相对初学者。我正在使用 Animate.css 库进行我想要的转换。

它在不滚动时基本上是 4 和 8 列布局，当我滚动时它变成 1 和 11。

没有转场效果很好，但整体效果不好看。

This is the URL , that I am using as inspiration

    <div class="column is-4 is-hidden-touch" v-show="! isScroll">
      <navcomponent :navScroll = "isScroll"></navcomponent>
    </div>

    <div class="column is-8" v-show=" ! isScroll">
      <maincontent></maincontent>
    </div>

    <transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut" mode="out-in">
      <div class="column is-1 is-hidden-touch" v-show="isScroll">
       <navcomponent :navScroll = "isScroll"></navcomponent>
      </div>

    </transition>

  <transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut" mode="out-in">

    <div class="column is-11" v-show=" isScroll">
      <maincontent></maincontent>
    </div>
  </transition>

谁能指点我做错了什么？

Answer 1

我觉得这个方法不错。你总是可以从 jsFiddle 开始然后从那里去。

<transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut" mode="out-in">
 <div v-if="showWhenCondition">
 </div>
</transition>

带有 v-if 或 v-show 的转换和标记应该确实足够了。您能否详细说明实际发生的情况？控制台中有任何错误吗？

Answer 2

我真傻

我错误地在另一个项目的 index.html 中添加了 animate.css 文件，而不是当前项目。

不过，我不喜欢最后的结果。

我们是否有任何其他 CSS 与 Vuejs 配合良好的转换库？我不想使用 Javascript 钩子进行过渡，因为坦率地说，我处于初学者水平。

在不影响阅读流畅的情况下，更加微妙和舒适。

Answer 3

试试这个方法，你会得到结果。

必须将 animate__animated animate__(animation name) 附加到 transition 标签，然后指定的动画才会执行。

<transition appear enter-active-class="animate__animated animate__bounce" leave- 
    active-class="animate__animated animate__jello" mode="out-in">
    <div class="alert alert-info" v-if="show">This is some info</div>  
</transition>

Vuejs Animate.css 不工作

Vuejs Animate.css not working

css

vue.js

css-transitions

vuejs2

animate.css