vue2之引入动画库

最新推荐文章于 2024-04-15 22:11:57 发布
最新推荐文章于 2024-04-15 22:11:57 发布
阅读量158 收藏
点赞数
文章标签： vue.js 前端 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47039303/article/details/121457143
版权 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	       .myanima-enter-active{

				animation:my 1s ease;

	       }
	       .myanima-leave-active{

				animation:my 1s ease reverse;

	       }
	    @keyframes my{
			0%{
				transform:translate(0px);
			}
			50%{
				transform:translate(100px);
			}
			0%{
				transform:translate(0px);
			}


	    }

		


	</style>
	<link rel="stylesheet" href="css/animate.min.css">
</head>
<body>
   <div id="app">
   	<button @click="flag= !flag">点击</button>

<!--    	<transition enter-active-class="animated bounceIn" leave-active-class=" animated bounceOut">
   		<p v-if="flag">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

          <br>
          xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
   		</p>

   	</transition> -->
   	<!-- 优化后   动画时长 毫秒 :duration="200"  :duration="{enter:200,leace:400}"-->
	<transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="{enter:200,leave:400}">
	     <!-- animated是animation.css的类 -->
   		<p v-if="flag" class="animated">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

          <br>
          xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
   		</p>

   	</transition>	



   </div>	





</body>
 <script src="js/vue.js"></script>
 <script type="text/javascript">
 var Vue=new Vue({
     el : "#app",
     data : {
        "flag" :false
     }



 });



 </script>
</html>
默默努力的小老弟
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue2 动画animation
fyinthesky的专栏
02-27 799
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;     &lt;meta charset="UTF-8"&gt;     &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;    
vue2的css 动画库的基本使用方式
weixin_52966724的博客
05-10 1065
初级css动画库的使用一、前言二、本次使用的CSS动画库三、Vue2的基础应用知识1. 一个组件和六个类名（1）一个组件（2）六个类名四、CSS动画库的基础应用1.animate.css动画库（1）安装（2）一个小案例A、代码B、运行图2.animate.css动画库（1）.安装（2）.一个小案例A.引用B.代码C.效果总结 一、前言 本篇文章主要针对于初次接触css动画库的萌新工程师，在这我会以简单易懂的语言向你介绍css动画库，让你初步了解、使用css动画库。但愿你能听懂 二、本次使用的CSS动画库 本
vue3之动画(与vue2一致)总结就是3个单词 from active to(来去活)
weixin_47039303的博客
11-25 127
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .lk-enter-from{ opacity: 0; transform: translateY(30px); } .lk-enter-active{ transition: all
vue2动画
最新发布
Cheny_Yang的博客
04-15 941
在Vue.js 2中，动画和过渡是通过和组件来实现的。
踩坑系列之Vue引入动画库
m0_65661084的博客
03-11 1076
引入动画库需要从animate网站上复制，默认复制是类名，带前缀animate__， 1.直接使用animate库中定义的 keyframes 动画时，需要去掉前缀 .why-enter-active { animation: backInUp 1s; } .why-leave-active { animation: backInUp 1s reverse; } 2.直接使用animate库提供给我们的类 ，不需要去掉前缀，但是要在引入的类名之前添加animate__animate..
VUE2 动画效果
DTCloud
04-23 788
作用：在插入、更新或移除DOM元素时，在适合的时候给元素添加样式类名。 图示： 简单写法 <transition name="hello" appear> <!-- name="hello"表示transition名称-enter-active和-leave-active对应，与下面；appear表示页面一出现就产生动画 --> <h1 v-show="isShow">你好~</h1> </transition> <button
在Vue中快速引入Live2d
08-12
在Vue.js框架中引入Live2D是一项有趣且增强用户体验的技术应用。Live2D是一种二维实时渲染技术，可以创建逼真的动态角色模型，广泛应用于游戏、社交媒体应用和网站中。Vue.js是一个轻量级且功能强大的渐进式...
在vue2中使用动画库
qq_55685361的博客
05-09 1297
一、在vue2中使用 animate.cs 1.1 安装 详情参考：使用文档 使用npm进行安装 npm install animate.css --save 在vue-cli创建的main.js中导入 import 'animate.css'; 1.2 使用 1.2.1 设置class类使用动画效果 将 animate__animate 类以及任何动画名添加到元素中，即可使用动画效果 <h1 class="animate__animated animate__bounce">An anim
vue页面引入three.js实现3d动画场景操作
10-14
在Vue项目中集成Three.js是为了实现3D动画场景的创建和操作。Three.js是一个基于JavaScript的WebGL库，它使得在浏览器中构建3D模型和动画变得更加简单。下面将详细介绍如何在Vue中引入和使用Three.js，以及相关插件...
vue实现动画，点击实现隐藏显示
04-11
Vue.js官方维护了一个轻量级的动画库——Vue animate，它提供了基于CSS3的预定义动画，可以直接引入使用，简化开发流程。 总结起来，Vue.js提供了多种方式实现动画效果，从简单的CSS过渡到复杂的JavaScript钩子...
【Vue框架】Vue2中动画效果详解—单组动画、多组动画、使用animate动画库、transition-group 列表动画(附源码)
量化Mike
03-30 1197
动画过渡效果：https://cn.vuejs.org/v2/guide/transitions.html 2、Vue定义多组动画 3、使用animate动画库 动画样式库
推荐一款炫酷的Vue.js过渡效果库：Vue2-Transitions
gitblog_00096的博客
04-12 388
推荐一款炫酷的Vue.js过渡效果库：Vue2-Transitions 项目地址:https://gitcode.com/BinarCode/vue2-transitions Vue2-Transitions 是一个由BinarCode开发的Vue.js组件集，专门用于创建平滑的动画和过渡效果。它为Vue.js应用中的元素提供了丰富的可视化转场效果，使得开发者能够轻松地在页面间、组件间添加专业级别...
用Vue2如何做过渡&动画效果+著名动画库
huihui_999的博客
03-07 1282
Vue2如何做过渡&动画效果+著名动画库
vue-过渡动画和 第三方动画库导入，带图
weixin_30294021的博客
07-27 164
vue路由过渡动画 //用transition将路由出口包裹起来 <transition name="fade" mode="out-in"> <router-view></router-view> </transition> //定义动画 .fade-enter{ opacity: 0p...
vue2 笔记8动画
路过君的博客
01-29 694
样例解析 <template> <div class="hello"> <button @click="show1 = !show1">show</button> <!-- 使用transition标签，会在动画的对应阶段给包裹的元素添加、删除相应的样式 --> <!-- appear 使得元素在创建时就使用动画显示 --> <transition appear> <h1
Vue2过渡/动画
cjiajiajiawa的博客
04-03 558
在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如。在元素被插入之前生效，在元素被插入之后的下一帧移除。在离开过渡被触发时立刻生效，下一帧被移除。可以控制进入/离开过渡的不同的缓和曲线，在下面章节会有个示例说明。
VUE2 入坑指南04--动画
无尘的躺坑记录
02-02 158
动画 使用 transition 元素，把需要被动画控制的元素，包裹起来 v-enter 进入之前 v-enter-to 进入之后 v-enter-active 入场动画时间段 v-leave 离开前 v-leave-to 立候的终止状态，此时动画已经结束 v-leave-active 离场动画时间段 列表动画： 实现列表过渡，若是通过 v-for 循环渲染出来的，不能使用 transition 包裹，需要使用 transitionGroup ,且每项需要 :key=“ite
vue2中使用Animate.css动画插件
qq_60654563的博客
06-09 2442
vue2中使用Animate.css动画插件
【Vue 学习】Vue2 的动画与过渡
不谷的博客
03-16 1131
Vue2 的动画与过渡
Vue3使用wow.js动画库
05-20
2. 在您的Vue组件中引入wow.js和animate.css： ```javascript import WOW from 'wow.js' import 'animate.css' ``` 3. 在组件的mounted()生命周期函数中初始化wow.js： ```javascript mounted() { new WOW().init...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值