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 相关文章推荐
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
Mar 04 Javascript
Jquery通过JSON字符串创建JSON对象
Aug 24 Javascript
javascript生成大小写字母
Jul 03 Javascript
jquery小火箭返回顶部代码分享
Aug 19 Javascript
js基于setTimeout与setInterval实现多线程
Jun 17 Javascript
jQuery Ajax请求后台数据并在前台接收
Dec 10 Javascript
微信小程序 配置文件详细介绍
Dec 14 Javascript
基于JavaScript实现窗口拖动效果
Jan 18 Javascript
js的函数的按值传递参数(实例讲解)
Nov 16 Javascript
JavaScript事件委托原理与用法实例分析
Jun 07 Javascript
小试SVG之新手小白入门教程
Jan 08 Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
Mar 28 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
如何开始收听短波广播
2021/03/01 无线电
构建简单的Webmail系统
2006/10/09 PHP
PHP中遍历stdclass object的实现代码
2011/06/09 PHP
zf框架的Filter过滤器使用示例
2014/03/13 PHP
PHP过滤黑名单关键字的方法
2014/12/01 PHP
IOS 开发之NSDictionary转换成JSON字符串
2017/08/14 PHP
JS查看对象功能代码
2008/04/25 Javascript
JavaScript 新手24条实用建议[TUTS+]
2009/06/21 Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
2012/08/22 Javascript
JS 添加千分位与去掉千分位的示例
2013/07/11 Javascript
js动态生成指定行数的表格
2013/07/11 Javascript
div失去焦点事件实现思路
2014/04/22 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
2015/07/09 Javascript
基于javascript如何传递特殊字符
2015/11/30 Javascript
js中判断变量类型函数typeof的用法总结
2016/08/09 Javascript
jQuery点击头像上传并预览图片
2017/02/23 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
2017/04/21 Javascript
ES6 class类链式继承,实例化及react super(props)原理详解
2020/02/15 Javascript
Vue中函数防抖节流的理解及应用实现
2020/04/24 Javascript
Python模拟登录12306的方法
2014/12/30 Python
如何通过python画loss曲线的方法
2019/06/26 Python
如何实现Django Rest framework版本控制
2019/07/25 Python
Django框架教程之中间件MiddleWare浅析
2019/12/29 Python
Pycharm IDE的安装和使用教程详解
2020/04/30 Python
解决Keras使用GPU资源耗尽的问题
2020/06/22 Python
荷兰家电购物网站:Expert.nl
2020/01/18 全球购物
一道Delphi面试题
2016/10/28 面试题
自荐信写法介绍
2014/01/25 职场文书
秋游活动策划方案
2014/02/16 职场文书
食品工程专业求职信
2014/06/15 职场文书
法学专业求职信
2014/07/15 职场文书
教师自我剖析材料
2014/09/29 职场文书
学校政风行风自查自纠报告
2014/10/21 职场文书
关于法制教育的宣传语
2015/07/13 职场文书
情况说明书格式及范文
2019/06/24 职场文书
springboot项目以jar包运行的操作方法
2021/06/30 Java/Android