5分钟学会Vue动画效果(小结)


Posted in Javascript onJuly 21, 2018

本文介绍了5分钟学会Vue动画效果(小结),分享给大家,具体如下:

1.哪些元素/那些组件适合在那些条件下实现动画效果

  1. 条件渲染 (使用 v-if)
  2. 条件展示 (使用 v-show)
  3. 动态组件
  4. 组件根节点

简单经典例子:(文字隐藏到显示效果)

<div>
 <button @click="show = !show">show toggle</button>
 <transition name="fade"> //fade 自定义名称
  <p v-if="show">hello</p>
 </transition>
</div>

<style>
.fade-enter-active{   
 transition: opacity .5s;   //类名:隐藏到显示过程所需要的时间
}
.fade-enter {      // 类名:初始化状态
 opacity: 0;
}
</style>

自己画了一个过渡动画生命周期,表示:动画开始,过程,结束,类名生效和失效

5分钟学会Vue动画效果(小结) 

隐藏到显示,显示到隐藏过程

5分钟学会Vue动画效果(小结) 

css动画

<div>
 <button @click="show = !show">show toggle</button>
 <transition name="fade"> //fade 自定义名称
  <p v-if="show">hello</p>
 </transition>
</div>

<style>
.fade-enter-active {    //类名:隐藏到显示过程所需要的时间
 animation: bounce-in .5s;
}
.fade-leave-active {    //类名:显示到隐藏过程所需要的时间
 animation: bounce-in .5s reverse;   //reverse表示和隐藏到显示动画相反
}
@keyframes bounce-in {
 0% {
  transform: scale(0);
 }
 50% {
  transform: scale(1.5);
 }
 100% {
  transform: scale(1);
 }
}
</style>

我们也可以自定义类名

<div>
 <button @click="show = !show">show toggle</button>
 <transition enter-class="fadeEnter" enter-active-class="fadeActive" > //fade 自定义名称
  <p v-if="show">hello</p>
 </transition>
</div>

<style>
.fadeActive{   
 transition: opacity .5s;   //类名:隐藏到显示过程所需要的时间
}
.fadeEnter {      // 类名:初始化状态
 opacity: 0;
}
</style>

学到这里,我们其实也可以可以引用第三方库来实现这效果,Animate.css

// 在index.html文件下引入Animate.css
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="external nofollow" rel="stylesheet" type="text/css">
// 在组件内
<div>
 <button @click="show = !show">show toggle</button>
 <transition 
  enter-active-class="animated tada"
  leave-active-class="animated bounceOutRight" >
  <p v-if="show">hello</p>
 </transition>
</div>

文字抖动效果 学的这里使用css实现Vue动画效果就实现了,后面如果有空补充下用js来实现这效果,好处就是封装个组件哪里需要引用就行,更加方便,快捷

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript读取中文cookie时的乱码问题的解决方法
Oct 14 Javascript
javascript基础第一章 JavaScript与用户端
Jul 22 Javascript
JS实现的生成随机数的4个函数分享
Feb 11 Javascript
详解JavaScript的while循环的使用
Jun 03 Javascript
vue.js树形组件之删除双击增加分支实例代码
Feb 28 Javascript
vue实现全选和反选功能
Aug 31 Javascript
vue用addRoutes实现动态路由的示例
Sep 15 Javascript
vue组件表单数据回显验证及提交的实例代码
Aug 30 Javascript
解决vue动态为数据添加新属性遇到的问题
Sep 18 Javascript
layer ui 导入文件之前传入数据的实例
Sep 23 Javascript
如何在Node和浏览器控制台中打印彩色文字
Jan 09 Javascript
在VUE style中使用data中的变量的方法
Jun 19 Javascript
详解从Vue-router到html5的pushState
Jul 21 #Javascript
JS实现面向对象继承的5种方式分析
Jul 21 #Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
Jul 21 #Javascript
vue项目中添加单元测试的方法
Jul 21 #Javascript
基于Vue实现关键词实时搜索高亮显示关键词
Jul 21 #Javascript
jQuery实现的点击按钮改变样式功能示例
Jul 21 #jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 #jQuery
You might like
yii添删改查实例
2015/11/16 PHP
php设计模式之委托模式
2016/02/13 PHP
php自定义时间转换函数示例
2016/12/07 PHP
jquery实现图片随机排列的方法
2015/05/04 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
2015/10/31 Javascript
javascript给span标签赋值的方法
2015/11/26 Javascript
学习JavaScript设计模式之迭代器模式
2016/01/19 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
2016/06/09 Javascript
vue.js指令v-model实现方法
2016/12/05 Javascript
angular或者js怎么确定选中ul中的哪几个li
2017/08/16 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
2018/03/18 Javascript
vue基础之模板和过滤器用法实例分析
2019/03/12 Javascript
elementUI Tree 树形控件的官方使用文档
2019/04/25 Javascript
关于vue的列表图片选中打钩操作
2020/09/09 Javascript
[56:35]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第二局
2016/02/27 DOTA
Python中文件遍历的两种方法
2014/06/16 Python
Python中字典的基础知识归纳小结
2015/08/19 Python
一键搞定python连接mysql驱动有关问题(windows版本)
2016/04/23 Python
Python Queue模块详细介绍及实例
2016/12/27 Python
python 网络编程详解及简单实例
2017/04/25 Python
Python设计模式之代理模式简单示例
2018/01/09 Python
使用Python和xlwt向Excel文件中写入中文的实例
2018/04/21 Python
使用pycharm生成代码模板的实例
2018/05/23 Python
python实现将多个文件分配到多个文件夹的方法
2019/01/07 Python
scrapy在python爬虫中搭建出错的解决方法
2020/11/22 Python
使用CSS3设计地图上的雷达定位提示效果
2016/04/05 HTML / CSS
利用HTML5 Canvas制作一个简单的打飞机游戏
2015/05/11 HTML / CSS
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
美国经典刺绣和字母儿童服装特卖:Smocked Auctions
2018/07/16 全球购物
德国最新街头服饰网上商店:BODYCHECK
2019/09/15 全球购物
美国眼镜在线零售商:Dualens
2019/12/07 全球购物
linux面试题参考答案(9)
2015/01/07 面试题
工作迟到检讨书
2014/02/21 职场文书
2014年音乐教师工作总结
2014/12/03 职场文书
2015年世界无烟日演讲稿
2015/03/18 职场文书
法律意见书范文
2015/05/20 职场文书