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 学习笔记(六)
Dec 31 Javascript
Jquery css函数用法(判断标签是否拥有某属性)
May 28 Javascript
javascript ready和load事件的区别示例介绍
Aug 30 Javascript
Javascript中Array用法实例分析
Jun 13 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
Mar 22 Javascript
浅析Bootstrap缩略图组件与警示框组件
Apr 29 Javascript
JCrop+ajaxUpload 图像切割上传的实例代码
Jul 20 Javascript
jQuery获取file控件中图片的宽高与大小
Aug 04 Javascript
leaflet的开发入门教程
Nov 17 Javascript
jQuery插件zTree实现的多选树效果示例
Mar 08 Javascript
npm 下载指定版本的组件方法
May 17 Javascript
Vue data的数据响应式到底是如何实现的
Feb 11 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
php编写的简单页面跳转功能实现代码
2013/11/27 PHP
php下载文件超时时间的设置方法
2016/10/06 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
TP5(thinkPHP5框架)基于bootstrap实现的单图上传插件用法示例
2019/05/29 PHP
Javascript 调试利器 Firebug使用详解六
2009/07/05 Javascript
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
2010/09/12 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
2015/08/13 Javascript
Bootstrap每天必学之按钮(Button)插件
2016/04/25 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
2016/11/07 Javascript
解析Json字符串的三种方法日常常用
2018/05/02 Javascript
微信小程序npm引入vant-weapp的踩坑记录
2019/08/01 Javascript
JavaScript变量Dom对象的所有属性
2020/04/30 Javascript
Python实现的数据结构与算法之链表详解
2015/04/22 Python
Python使用matplotlib填充图形指定区域代码示例
2018/01/16 Python
在PYQT5中QscrollArea(滚动条)的使用方法
2019/06/14 Python
pyqt5与matplotlib的完美结合实例
2019/06/21 Python
Django Channels 实现点对点实时聊天和消息推送功能
2019/07/17 Python
win10环境下配置vscode python开发环境的教程详解
2019/10/16 Python
python设置环境变量的作用整理
2020/02/17 Python
image-set实现Retina屏幕下图片显示详细介绍
2012/12/24 HTML / CSS
美国乡村商店:Plow & Hearth
2016/09/12 全球购物
英国现代绅士品牌:Hackett
2017/12/17 全球购物
波兰运动鞋网上商店:Distance.pl
2020/07/30 全球购物
普天C++笔试题
2016/03/20 面试题
高中毕业自我鉴定
2013/12/19 职场文书
国际商务专业职业生涯规划书范文
2014/01/17 职场文书
《列夫托尔斯泰》教学反思
2014/02/10 职场文书
教师党的群众路线对照检查材料
2014/09/24 职场文书
党的群众路线教育实践活动个人剖析材料
2014/10/07 职场文书
2014年留守儿童工作总结
2014/12/10 职场文书
2015年依法治校工作总结
2015/07/27 职场文书
2016继续教育培训学习心得体会
2016/01/19 职场文书
导游词之西递宏村
2019/12/10 职场文书
opencv检测动态物体的实现
2021/07/21 Python
剑指Offer之Java算法习题精讲二叉树专项训练
2022/03/21 Java/Android
Go web入门Go pongo2模板引擎
2022/05/20 Golang