Vuejs Animate.css 不工作

Posted 2023-02-22

【中文标题】Vuejs Animate.css 不工作

【英文标题】：Vuejs Animate.css not working

【发布时间】：2017-12-01 08:19:23

【问题描述】：

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>

谁能指点我做错了什么？

【参考方案1】：

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

必须将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>

【讨论】：

这对我有用！

【参考方案2】：

我真的很傻

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

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

我们是否还有其他与 Vuejs 配合得很好的 CSS 过渡库？我不想使用 javascript 钩子进行转换，因为坦率地说我是初学者。

一些更微妙和容易的眼睛，不干扰阅读的流程。

【讨论】：

我来晚了，但是看看wicked css。

【参考方案3】：

这种方法对我来说看起来不错。您总是可以从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 的转换和标签确实足够了。您能否详细说明实际发生的情况？控制台有错误吗？

【讨论】：

没有错误只是没有过渡效果。问题是，我必须显示 div 4 列或 1 列

也许有一个基本的 jsfiddle，里面有简单的 div 和列，就像你的代码一样

谢谢伙计。任何其他具有微妙过渡并与 Vuejs 配合良好的 CSS 库

我猜任何有类的 css 库。您可以为 vuejs 的过渡提供一些用于不同过渡状态的类（例如 enter-active-class），只要它是有效的动画，它就可以工作