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 qq右下角滑出窗口 sheyMsg
Mar 21 Javascript
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
Apr 29 Javascript
IE6浏览器中window.location.href无效的解决方法
Nov 20 Javascript
jQuery实现带滚动线条导航效果的方法
Jan 30 Javascript
bootstrap table 服务器端分页例子分享
Feb 10 Javascript
使用JavaScript为Kindeditor自定义按钮增加Audio标签
Mar 18 Javascript
vue.js 表格分页ajax 异步加载数据
Oct 18 Javascript
jQuery无缝轮播图代码
Dec 22 Javascript
vue实现ToDoList简单实例
Feb 07 Javascript
微信小程序实现皮肤功能(夜间模式)
Jun 18 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
Aug 26 Javascript
jQuery实现的简单前端搜索功能示例
Oct 28 jQuery
详解从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/26 PHP
php缩小png图片不损失透明色的解决方法
2013/12/25 PHP
PHP code 验证码生成类定义和简单使用示例
2020/05/27 PHP
javascript函数中的arguments参数
2010/08/01 Javascript
自己写的Javascript计算时间差函数
2013/10/28 Javascript
js文本框输入内容智能提示效果
2015/12/02 Javascript
全面了解javascript中的错误处理机制
2016/07/18 Javascript
微信小程序  自定义创建详细介绍
2016/10/27 Javascript
JavaScript中的call和apply的用途以及区别
2017/01/11 Javascript
Node.js数据库操作之查询MySQL数据库(二)
2017/03/04 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
2017/06/08 Javascript
React 子组件向父组件传值的方法
2017/07/24 Javascript
使用classList来实现两个按钮样式的切换方法
2018/01/24 Javascript
基于vue开发的在线付费课程应用过程
2018/01/25 Javascript
JavaScript实现职责链模式概述
2018/01/25 Javascript
mint-ui在vue中的使用示例
2018/04/05 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
2018/04/22 Javascript
使用nodeJS中的fs模块对文件及目录进行读写,删除,追加,等操作详解
2020/02/06 NodeJs
原生js实现密码强度验证功能
2020/03/18 Javascript
vue addRoutes路由动态加载操作
2020/08/04 Javascript
Python抓取百度查询结果的方法
2015/07/08 Python
python3+PyQt5实现自定义窗口部件Counters
2018/04/20 Python
华为2019校招笔试题之处理字符串(python版)
2019/06/25 Python
利用ImageAI库只需几行python代码实现目标检测
2019/08/09 Python
python实现简单学生信息管理系统
2020/04/09 Python
Django 解决由save方法引发的错误
2020/05/21 Python
Python collections.defaultdict模块用法详解
2020/06/18 Python
python 利用openpyxl读取Excel表格中指定的行或列教程
2021/02/06 Python
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
2013/01/07 HTML / CSS
阿迪达斯荷兰官方网站:adidas荷兰
2018/03/16 全球购物
美国饼干礼物和美食甜点购买网站:Cheryl’s
2020/05/28 全球购物
音乐教育专业自荐信
2014/09/18 职场文书
秦兵马俑导游词
2015/02/02 职场文书
幼师辞职信怎么写
2015/02/27 职场文书
2015国庆66周年宣传语
2015/07/14 职场文书
关于Mybatis中SQL节点的深入解析
2022/03/19 Java/Android