关于vue使用animate.css中的enter-active-class=bounceIn不起作用的原因解决

最新推荐文章于 2022-09-23 20:36:52 发布
最新推荐文章于 2022-09-23 20:36:52 发布
阅读量3.8k 收藏 1
点赞数 2
文章标签： vue.js css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/L_e_a_f_/article/details/106795514
版权
本文探讨了在Vue项目中使用animate.css时，设置`enter-active-class`和`leave-active-class`为`bounceIn`和`bounceOut`无法生效的问题。详细分析了在animate.css Version 4.1.0中动画属性的设置，提供了可能的解决策略。
摘要由CSDN通过智能技术生成

enter-active-class="bounceIn"，设置后无动画效果

vue引用第三方类动画插件animate.css

demo使用的animate.css版本

  • animate.css - https://animate.style/
  • Version - 4.1.0
  • Licensed under the MIT license - http://opensource.org/licenses/MIT
  • Copyright © 2020 Animate.css

1. enter-active-class=“bounceIn”；leave-active-class=“bounceOut”,在animate.css中设置后无效

<div id="app">
    <input type="button" value="切换" @click="flag=!flag">
    <transition enter-active-class="bounceIn"
    leave-active-class="bounceOut"
    :duration="{enter: 200, leave: 400}">
        <h3 v-if="flag" class="animated">这是一个h3</h3>
    </transition>
</div>

2. 在Versi

最低0.47元/天 解锁文章
「已注销」
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vue3中使用animate.css插件css动画 实现弹性和晃动效果的入场动画
快来一起学习前端知识把！加油，前端人
07-01 304
animate__animated是animate.css库提供的基础动画类，确保动画效果能够应用到元素上。是被组件包裹的元素，它将应用animate__animated shine类提供的样式，并在进入页面时按照animate__backInDown animate__wobble类定义的动画效果进行展示。enter-active-class="animate__backInDown animate__wobble"属性定义了元素进入（显示）时的动画类。元素的进入效果提供一个动画。这两个类的组合可以为。
animate.css在vue项目中的使用教程
12-09
你可以将 Animate.css 的动画与 Vue 的 `<transition>` 结合使用，通过 `v-enter`、`v-enter-active`、`v-leave` 和 `v-leave-active` 类来指定不同阶段的动画。 例如： ```html <transition enter-active-class=...
vue动画基础知识
linlinaitangtang的博客
09-23 1744
建议：多用props，少在组件中使用data（降低组件的耦合性）注意：template有且只有一个根节点}2.在父组件中注册}
VUE3 之 使用标签实现动画与过渡效果（下） - 这个系列的教程通俗易懂，适合自学
追风人的博客
03-06 1330
目录 1. 概述 2.使用标签实现动画与过渡的效果 3. 综述 4. 个人公众号 1. 概述 毛毛虫效应： 有这样一个实验，将许多毛毛虫放在一个花盆边缘，使它们首尾相接，围成一个圈。然后在离花盆很近的地方撒了一些毛毛虫的食物。 此时，毛毛虫并不会向食物的方向爬去，而是在花盆边缘，一个跟着一个的转圈，直到7天后，因为饥饿和精疲力尽相继死去。 这是毛毛虫的一种特性吧，它们喜欢跟随前者的路线行走，这也是固化思维的一种表现。 因此解放思维，有创新精神是很重要的。 言归正传，今天我们继.
vue基础教学（18）
Taojia9958的博客
07-01 677
自定义指令 vue动画
vue总结(三)
PepsiCo__的博客
11-02 185
目录 表单绑定指令 类绑定 style样式绑定 动画 表单绑定指令 v-model 让表单的值与 数据绑定在一起 <input type=“checkbox” 默认选中值是true 不选中值是false <input type=“checkbox” name=“fruit” v-model=“lest” 如果是多个把选中的值动态添加到list数组中 修饰符 .number数字 .trim移除两端空格 类绑定 1.属性 :class=“值” 2.对象 当对象的属性值为真，该属性作为class绑
VUE之过渡transition+动画+动画钩子
weixin_45492145的博客
10-31 3272
ue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具： 在 CSS 过渡和动画中自动应用 class–基础动画 可以配合使用第三方 CSS 动画库，如 Animate.css–CSS动画 在过渡动画钩子函数中使用 JavaScript 直接操作 DOM—JS动画 可以配合使用第三方 JavaScript 动画库，如 Velocity.js—JS动画库 Vue 提供了...
Vue3——内置组件
mantou_riji的博客
07-25 1167
egApp组件中嵌套着Child子组件，使用异步引入的方式的话，如果child组件没有加载进来，app组件已经加载好了，那app组件就会先显示在页面上，Child组件什么时候加载完什么时候在进行显示。egApp组件中嵌套着Child子组件，使用静态引入的方式的话，如果child组件没有加载进来，app组件是不会显示在页面上的，所以App组件最终会和Child组件一同渲染到页面上。//importChildfrom'./components/Child'//静态引入。上述引入方法就是异步引入。...
vue过渡和animate.css结合使用详解
08-30
在 Vue 中，我们可以使用 `transition` 元素来包围需要过渡的元素，并使用 `enter-active-class` 和 `leave-active-class` 属性来指定进入和离开动画效果。 例如，在上面的示例代码中，我们使用了以下代码来实现...
vue 1.0 结合animate.css定义动画效果
10-18
在Vue 1.0中，实现自定义动画效果可以借助CSS3动画库，如animate.css。animate.css提供了丰富的预定义动画效果，可以帮助开发者快速创建出各种动态效果。下面将详细介绍如何在Vue 1.0项目中结合animate.css来定义...
vue2.0 和 animate.css的结合使用
11-29
这里的 `enter-active-class` 和 `leave-active-class` 分别指定了进入和离开过渡时要应用的 animate.css 类名。`v-show` 用于控制元素的显示和隐藏，从而触发过渡效果。 3. **animate.css 的类选择器**： 在上面...
Vue07---vue中的css动画原理及animate.css使用
m0_37756431的博客
03-13 2475
目录 一、transition过渡动画原理 二、使用keyframes关键帧 三、在vue中使用animate.css 同时使用过渡和动画 一、transition过渡动画原理 当元素被transition标签包裹之后，vue会自动分析被包裹的元素的css样式，然后构建一个动画的流程。 在动画开始执行的瞬间会往div标签上增加两个样式：fade-enter、fade-enter-active,当动画第一帧结束开始第二帧的时候，会移除fade-enter样式，同时加上fade-e...
18.Vue过渡&动画：transition
高新园养鸡场
09-08 984
简介 Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡： 条件渲染 (使用 v-if) 条件展示 (使用 v-show) 动态组件 组件根节点   过渡类名 在进入的过渡中，会有 3 个 class 切换。 v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。 v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以
vue操作动画的记录animate.css
qq_42815671的博客
04-10 1981
transition动画 //使用动画库animate.css <transition enter-active-class='animated bounceIn' leave-active-class='animated bounceOut' :duration='200'> //其中duration是绑定动画的时间 统一设置进入与出去的时间 <h3 v-if='flag'&g...
动画效果
Zyl_CN的博客
10-11 170
在Vue中所有的动画创建，都需要被&lt;transition&gt;标签来包裹 使用&lt;transition&gt;标签可以给任何的元素和组件添加进入、离开的过度 动画的经过： v-enter  --&gt;   v-enter-to    ||   v-leave   --&gt;  v-leave-to 所以就可以在css中来给予： 进入时（v-enter）和 退出时（v-lea...
进入/离开&列表过渡总结
weishichuan4321的博客
04-16 1732
概述vue在插入、更新或移除dom时，提供多种不同方法的应用过渡效果，包括以下工具：（1）在css过渡和动画中自动应用class（2）可以配合第三方css动画库，如animate.css（3）在过渡钩子函数中使用javascript直接操作dom（4）可以配合第三方javascript动画库，如velocity.js单元素/组件的过渡vue提供了transition的封装组件，在下列情形中，可以给...
【Vue】transition 标签的使用
热门推荐
Superman_H的博客
02-09 4万+
# transition 标签 - transition 标签：Vue 内置的动画标签 - 作用：在 [插入] / [更新] / [移除] DOM 元素时，在合适的时候给元素添加样式类名（配合 CSS 样式使用，实现动画效果） **注意事项：** - transition 标签只能包含 **1 个** 元素；如果里面写了多个元素，则只生效第一个 - transition 包裹的标签需要设置 `v-show` / `v-if` 属性控制元素的显示 **动画 CS
Vue - 使用 transition 过渡动画、Animate.css 库动画
技术共享，共同进步！
08-18 8687
Vue - 使用 transition 过渡动画、Animate.css 库动画
Vue实现过渡动画的三种方式
上庸者-不服周
06-28 8275
Vue过渡动画
vue2使用animate.css
最新发布
10-02
在Vue2中使用animate.css，你可以按照以下步骤进行操作: 1. 在终端中使用npm命令安装animate.css库: ``` npm install animate.css --save ``` 2. 在你的main.js文件中引入animate.css: ```javascript import ...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值