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

尝试这种方法，您将获得结果。

只有在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>

Answer 3

真的很愚蠢我

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

但是，我不喜欢最终结果。

我们是否有其他适用于Vuejs的CSS过渡库？我不想使用Javascript钩子进行转换，因为坦率地说我是初学者级别。

眼睛上更微妙和容易的东西，不会扰乱阅读的流动。

Vuejs Animate.css无法正常工作

3 个答案: