Vue.js 相关知识(动画)

1. 简介

Vue 在插入、更新或移除 DOM 时,提供多种不同方式的过渡效果,并提供 transition 组件来实现动画效果(用 transition 组件将需执行过渡效果的元素包裹)

语法:<transition name=””>元素或组件(进入或离开时会有动画效果)</transition>

name 属性是执行动画效果的 css 类名,与6个 css 类产生关联:

假设 transition 的 name为v,transition 组件会自动在不同时机添加如下6个类:

  • v-enter:定义过渡开始状态的样式
  • v-enter-active:定义过渡的状态,该类常被用来定义过渡的过程时间、延迟、曲线函数。
  • v-enter-to:定义过渡结束状态的样式(vue 2.1.8以上版本)
  • v-leave:定义离开之前的样式
  • v-leave-active:定义从0到1过程中的样式
  • v-leave-to:定义到达目的地之后的效果

2. 执行动画的情况

动画只在2个节点发生:

  • 进入:从不显示到显示(v-show),从无到有。
  • 离开:从显示到不显示(v-show),从有到无。

条件渲染(使用v-if):根据条件控制元素添加、删除

条件展示(使用v-show):根据条件控制元素显示、隐藏

动态组件(使用:is):多个组件切换(涉及到组件显示、隐藏)

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><script type="text/javascript" src="vue.js"></script>    <style type="text/css">.v-enter{opacity: 0}.v-enter-to{opacity: 1}.v-enter-active{transition: all 1s}.v-leave{opacity: 1}.v-leave-to{opacity: 0}.v-leave-active{transition:all 1s}</style>
</head>
<body><div id="app"><div class="title"><h3 @click="isshow=!isshow">标题</h3></div><transition name="v"><div class="content" v-show="isshow"><p>内容</p></div></transition></div><script type="text/javascript">let app = new Vue({el:"#app",data:{isshow:true}})    app.$mount('#app')</script>
</body>
</html>

可将<style>中的内容简化为:

<style type="text/css">.v-enter,.v-leave-to{opacity: 0}.v-enter-active,.v-leave-active{transition: all 1s}
</style>

3. transition-group

  • 若给一个元素绑定动画效果,使用<transition>组件
  • 若给多个元素绑定动画效果,使用<transition-group>组件

为了区分元素列表,需要给子元素增加:key属性,表示每个子元素的索引

语法:<transition-group name=””> <元素1 :key=””></元素1> <元素2 :key=””></元素2> </transition-group>

4. 内置 css 类实现过渡

除在 transition 组件上增加 name 属性,来实现动画效果外,Vue还提供6个内置的类,可直接在transition组件上使用(为了兼容 animate.css 框架)

https://daneden.github.io/animate.css/

  • enter-class:相当于.v-enter
  • enter-active-class:相当于.v-enter-active
  • enter-to-class:(2.1.8之后)
  • leave-class
  • leave-active-class
  • leave-to-class:(2.1.8之后)

例:结合vue.js和animate.css动画框架实现一些动态效果

注:无需指定开始、结束状态时的css样式(animate.css中已指定)

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="animate.css"><script type="text/javascript" src="vue.js"></script>    <style type="text/css">.dialog{width: 300px;height: 300px;background: #333;color: #fff;}</style>
</head>
<body><div id="app"><button @click="isshow=!isshow">按钮</button><transition enter-active-class="animated bounceInDown" leave-active-class="animated bounceOutUp"><div class="dialog" v-show="isshow">内容</div></transition></div><script type="text/javascript">let app = new Vue({el:"#app",data:{isshow:false}})            </script>
</body>
</html>

5. 钩子函数实现过渡

先指定不同阶段执行的js函数,在该函数中实现该阶段的css动画(通常结合 velocity.js、move.js 等JavaScript动画框架实现)。在钩子函数中,会自动将执行过渡效果的元素传递到钩子函数中。

语法:

<transitionv-on:before-enter=”beforeEnter”v-on:enter=”enter”v-on:after-enter=”afterEnter”v-on:enter-cancelled=”enterCancelled”v-on:before-leave=”beforeLeave”v-on:leave=”leave”v-on:after-leave=”afterLeave”v-on:leave-cancelled=”leaveCancelled”> 
</transition>

例子:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><script src="https://cdn.jsdelivr.net/npm/velocity-animate@1.5.0/velocity.min.js"></script><script type="text/javascript" src="vue.js"></script>    <style type="text/css">.dialog{width: 300px;height: 300px;background: #333;color: #fff;}</style>
</head>
<body><div id="app"><button @click="isshow=!isshow">按钮</button><transition v-on:before-enter="beforeEnter" v-on:enter="Enter"><div class="dialog" v-show="isshow">内容</div></transition></div><script type="text/javascript">let app = new Vue({el:"#app",data:{isshow:false},methods:{beforeEnter(el){el.style.opacity = 0;},Enter(el){Velocity(el,{opacity:1,fontSize:"2em"},{duration:1000})Velocity(el,{backgroundColor:"#666"})}}})            </script>
</body>
</html>

更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/362803.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

三个水桶等分8升水的问题

目录 智力题目答案问题分析程序代码&#xff08;PHP&#xff09;运行结果小结推荐阅读智力题目 有三个容积分别为3升、5升、8升的水桶&#xff0c;其中容积为8升的水桶中装满了水&#xff0c;容积为3升和容积为5升的水桶都是空的。三个水桶都没有刻度&#xff0c;现在需要将大水…

Maven Git发布

在开始这篇文章之前&#xff0c;我需要指出我在去年才开始认真地与Git合作 。 不幸的是&#xff0c;我从事的许多项目仍在使用SVN或CVS&#xff0c;但现在我终于开始使用Git了 。 在过去的几年中&#xff0c;我使用Maven Release Plugin完成了许多软件发行。 我仍然记得我花了…

sqlserver 多表更新

sqlserver 多表更新 update bi_user_organization set bi_user_organization.bi_organization_id b.id frombi_user_organization a, bi_organization_structure b where a.teamb.name 转载于:https://www.cnblogs.com/handsome1013/p/11594075.html

ASP.net Table 控件

功能&#xff1a;在Web页中创建通用表。 属性&#xff1a; 1、CellPadding属性&#xff1a;用于设置表中单元格的边框和内容之间的距离&#xff08;以像素为单位&#xff09;。默认为-1&#xff08;未设置&#xff09;。 2、CellSpacing属性&#xff1a;用于设置表中单元格之间…

JS 判断是否是手机端并跳转操作

JS 判断运行当前脚本的应用程序是否为手机端或者一些其他信息&#xff0c;在我的工作中遇到的不是十分频繁&#xff0c;被我的同事一问就给问住了&#xff0c;所以把之前找到的一些知识点整理出来&#xff0c;供大家参考&#xff0c;若哪里不对欢迎指出&#xff0c;我会及时的更…

使用拦截器分析Java EE应用程序的性能下降/提高

在开发具有某些性能要求的Java EE应用程序时&#xff0c;必须在每个发行版之前验证是否满足这些要求。 您可能会想到&#xff0c;哈德森的一项工作每天晚上在某些特定的硬件平台上执行一系列测试测量。 您可以检查已实现的时间并将它们与给定的要求进行比较。 如果测量值与要求…

子组件上下结构布局自适应父组件宽度高度

1、父级页面 <template><div><div class"parentDiv"><!-- gys-org-navigator 在这里是全局注册组件 --><gys-org-navigator ref"orgNavigator" :org-tree"orgTree" :org-id"orgId" :org-type"orgType…

狸猫换太子:动态替换WinCE的原生驱动!

////TITLE:// 狸猫换太子&#xff1a;动态替换WinCE的原生驱动&#xff01;//AUTHOR:// norains//DATE:// Friday 23-April-2010//Environment:// Windows CE 5.0 TCC7901// 大家应该都知道&#xff0c;WinCE系统的驱动是可以非常方便地动态加载和卸载的&#xff…

mysql批量更新

由于mysql没有top函数&#xff0c;limit也不支持子查询&#xff0c;所以批量修改、查询就显得比较麻烦&#xff0c; 但是我还是想到了一个办法&#xff1b; 即创建一个临时表&#xff0c;用于批量操作&#xff1b; 详细如下&#xff1a; 1 create TEMPORARY TABLE test(cardId …

将Spring 3.x和Hibernate 3.x升级到Spring Platform 1.0.1(Spring + hibernate 4.x)

我最近自愿将我们的最新项目升级到最新版本的Spring Platform。 Spring Platform为您提供的是整个Spring框架库集中的依赖项和插件管理。 由于我们落后了一点&#xff0c;升级确实增加了一些乐趣。 这是我遇到的事情&#xff1a; Maven&#xff1a; 我们的pom文件仍在引用&am…

可缺省的CSS布局——张鑫旭

一、技术不难、意识很难 有些东西的东西的实现&#xff0c;难的不是原料、技术&#xff1b;而是想不到&#xff0c;或者说意识不到。 例如下面这个简单而又神奇的魔术&#xff1a; 是吧。搞通了&#xff0c;才发现&#xff0c;哦~原来这么回事&#xff0c;很简单的嘛&#x…

杭电1061题

//求N^N的个位数//思路&#xff1a;只计算个位数的乘积&#xff0c;个位数最后形成一个循环#include <iostream>#include <string>#include <vector>using namespace std;int main(){ int num; cin>>num; for(int i0;i<num;i) { vector<int>…

使用Spring AOP,自定义注释和反射为您的应用审核基础架构

下一篇文章将演示如何使用Spring AOP和注释编写简单的审计。 审核机制将是干净&#xff0c;高效且易于维护的&#xff08;和Kewwl&#xff01;&#xff09;。 我将在用户管理系统上演示我的示例&#xff08;假设您对反射和AOP具有一般知识&#xff09;。 我们从简单的数据库表…

Git命令总结(附详解)

1.进入某文件目录后&#xff1a;git init 是该目录成为git仓库 2.将改动存入暂存区&#xff1a;git add filename 3.将文件提交到仓库&#xff1a;git commit -m ‘该修改的注释’ 4.查看修改内容以及是否提交&#xff1a;git status 5.查看文件修改内容&#xff1a;git diff f…

JSON 使用 教程

JSONP 教程 本章节我们将向大家介绍 JSONP 的知识。 Jsonp(JSON with Padding) 是 json 的一种"使用模式"&#xff0c;可以让网页从别的域名&#xff08;网站&#xff09;那获取资料&#xff0c;即跨域读取数据。 为什么我们从不同的域&#xff08;网站&#xff09;访…

SQL Cookbook:二、查询结果排序(1)以指定的次序返回查询结果

问题 显示部门10中员工的名字、职位和工资&#xff0c;并按照工资的升序排列。结果集如下所示&#xff1a; ENAME JOBSAL---------- -------------------MILLER CLERK 1300CLARK MANAGER 2450KING PRESIDENT 5000解决方案 使用ORDER BY子句&#xff1a; select ename,job,sal…

经过几天的Scala回归Java的10个最烦人的事情

因此&#xff0c;我正在尝试使用Scala&#xff0c;因为我想编写一个解析器&#xff0c;而Scala Parsers API似乎非常合适。 毕竟&#xff0c;我可以在Scala中实现解析器并将其包装在Java接口后面&#xff0c;因此除了附加的运行时依赖关系之外&#xff0c;不应该存在任何互操作…

LeetCode 198. 打家劫舍(House Robber) 5

198. 打家劫舍198. House Robber 题目描述 你是一个专业的小偷&#xff0c;计划偷窃沿街的房屋。每间房内都藏有一定的现金&#xff0c;影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统&#xff0c;如果两间相邻的房屋在同一晚上被小偷闯入&#xff0c;系统会自…

SpringBoot 参数符号转义,用这个包下面的类

SpringBoot 参数符号转义&#xff0c;用这个包下面的类 org.apache.commons.text.StringEscapeUtils String team StringEscapeUtils.unescapeHtml4(biUserOrganization.getTeam()); 2017/12/01 | Java | admin| 暂无评论 | 8717 views如题所示&#xff0c;之前一直使用c…

irrlicht v1.6 例程18 Splitscreen

/** Example 018 Splitscreen, U( a# q, ( S f1 ]( p作者&#xff1a;Max Winkel." 9 ?( W; K V1 x8 \译&#xff1a;小时候可靓了&#xff08;履霜坚冰&#xff09;2 m! C! N# J2 i6 a2 Z! Q0 U2 D4 U: U% J1 E5 N! a0 L4 q& x这个例程中我们将学习怎么使用irrlicht…