vue动画

  vue 提供了一些显示、隐藏一些不同的过渡,效果主要跟 v-if v-show 动态组件

  1. vue 给动画分了 6 个过程,在 css 中扮演 6 个类

  .v-enter  定义动画的开始状态

  .v-enter-active  定义动画生效时的状态

  .v-enter-to  定义动画结束是的状态

  .v-leave  定义动画离开的状态

  .v-leave-active  定义动画离开时生效的状态

  .v-leave-to  定义动画离开结束的状态  

  2. 给需要动画的元素套一层 transition 组件

  3. 如果 transition 没有 name 的属性(没有名字),默认类的名称以 .v- 开头

    <transition name="di"></transition>  这个类的名称以 vue 动画,在 css 中扮演的 6 个类, .di-enter 定义动画的开始等等往后的 6 个都是以 .di- 开头

  4. 自定义动画类跟 animate.css 结合

    主要在标签上使用两个类即可  enter-active-class = '进入类'  enter-active-class = '淡出类'

   我们在使用 animate.css 的使用前要加 animated 的类名

  1.的案例:style 部分  body 部分  css 部分

    

    

    

  但其实我们并不需要每次都使用 6 个类来完成动画,而且我们还可以定义类名

  3.的案例:style部分  html 部分  js 部分与上面的案例 js 部分一样

    

    

   4. 的案例  style 部分  html 部分  js 部分与上面的案例一样

    

    

   以上是我们通过 css 来修改 动画的效果,接下来我们使用 js 来修改动画的效果

  template 中的写法  el 代表被  transition 包裹的元素

    

  js 中的写法

  

 

 

 

 

转载于:https://www.cnblogs.com/shangjun6/p/11253839.html

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

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

相关文章

图数据库的知识表示与推理

图形数据库及其技术生态系统可以为知识表示和推理问题提供优雅&#xff0c;有效的解决方案。 要了解这种说法&#xff0c;我们必须首先了解什么是图形。 图是一种数据结构。 图数据结构的类型很多&#xff0c;但出于本文的目的&#xff0c;我们将重点介绍一种已被称为属性图的类…

vegas 为盖斯

vegas 为盖斯 S键 分割素材U键 分开视频和音频I键渲染开始O渲染结束 默认布局 为盖斯新建项目的参数 剪好后渲染 插入字幕 转载于:https://www.cnblogs.com/GaoNa/p/10562504.html

COMET彗星(三)构建自己的COMET核心

主题列表&#xff1a; COMET彗星&#xff08;一&#xff09;SERVER PUSH介绍 COMET彗星&#xff08;二&#xff09;基于SERVER PUSH的消息传输 引言&#xff1a; 在上一篇随笔中&#xff0c;对COMET使用的类和作用进行了简短的介绍&#xff0c;从本篇随笔开始&#xff0c;将从实…

如何在JavaServer Pages中使用Salesforce REST API

摘要&#xff1a;本教程提供了一个JSP示例以及如何将其与Salesforce REST API集成。 我们将逐步完成创建外部客户端以使用Force.com &#xff08;同时使用HTTP&#xff08;S&#xff09;和JSON&#xff09;管理您的数据的分步过程。 在此示例中&#xff0c;我将Mac OS X 10.9.…

写在08年“愚人节”

从博客园学了很多东西&#xff0c;是时候该回馈了。谢谢博客园给我们提供这么好的平台交流技术。 刚发了文章习惯性的看了下自己博客的首页代码&#xff0c;感觉日历不够精良。 我做过的一个ajax日历&#xff0c;可以参考解放日报 艺术家具版的日期直达功能的日历&#xff0c;用…

JQuery实现点击按钮切换图片(附源码)--JQuery基础

JQuery实现切换图片相对比较简单&#xff0c;直接贴代码了哈&#xff0c;有注释噢&#xff01;疑问请追加评论哈&#xff0c;不足之处还请大佬们指出&#xff01; 1、案例代码&#xff1a; demo.html&#xff1a; <!DOCTYPE html><html><head>   <me…

CSS3盒子模型

web前端必须了解的CSS3盒子模型 1、需要了解的属性以及属性值 display:box或者display:inline-box box-orient:horizontal | vertical (水平 垂直) 定义盒模型的布局方向 box-direction:normal reverse(正序 反序) 元素排列顺序 box-ordinal-group:number(数值) 设置元素…

与JBoss Fuse,Jenkins和Nexus的持续集成

最近&#xff0c;我正在整理一个快速启动的Maven项目&#xff0c;以展示一种组织JBoss Fuse项目的可行方法。 该项目可在Github上找到&#xff1a; https &#xff1a; //github.com/paoloantinori/fuse_ci 这是我与朋友詹姆斯罗林斯 &#xff08; James Rawlings&#xff09…

html5表单与PHP交互

1、示例代码 前端&#xff1a; <!DOCTYPE html><html><head><meta charset"utf-8"> <title>html5表单与PHP交互</title></head><body><form action"http://localhost/jh.php" method"post"…

【DP】【期望】$P1850$换教室

【DP】【期望】\(P1850\)换教室 链接 题目描述 有 \(2n\) 节课程安排在$ n$ 个时间段上。在第 \(i\)&#xff08;\(1 \leq i \leq n\)&#xff09;个时间段上&#xff0c;两节内容相同的课程同时在不同的地点进行&#xff0c;其中&#xff0c;牛牛预先被安排在教室 \(c_i\)上课…

高并发服务器逻辑处理瓶颈,如何解决?

https://mp.weixin.qq.com/s/GHHHvgURdZpNJ1Ec6RHgPg 高并发衡量指标 响应时间&#xff1a;系统对请求做出响应的时间&#xff0c;即一个http请求返回所用的时间&#xff1b;吞吐量&#xff1a;单位时间内处理的请求数量&#xff1b;QPS&#xff08;TPS&#xff09;&#xff1a…

Java 8 StampedLocks与ReadWriteLocks和同步

同步部分就像访问您的岳父母。 您希望尽可能少出现。 关于锁定&#xff0c;规则是相同的–您想花费最短的时间在关键区域内获取锁定&#xff0c;以防止形成瓶颈。 锁定的核心语言惯用法一直是用于方法和离散块的synced关键字。 这个关键字实际上已硬连接到HotSpot JVM中。 我们…

MSN on 2/16/2009

转载于:https://www.cnblogs.com/zxlin25/archive/2009/02/16/1391207.html

开发微信小程序中SSL协议的申请、证书绑定、TLS 版本处理等

在上篇随笔《基于微信小程序的系统开发准备工作》介绍了开发微信小程序的一些前期的架构设计、技术路线 、工具准备等方面内容&#xff0c;本篇随笔继续这个步骤&#xff0c;逐步介绍我们实际开发过程中对SSL协议的申请及后期处理过程&#xff0c;包括证书的IIS端口绑定&#x…

【面向对象】对比JavaScript、Go、Ada、Python、C++、Java、PHP的访问限制。

在不同编程语言中&#xff0c;控制成员&#xff08;变量、方法、类等&#xff09;可见性的机制不尽相同。以下是对比JavaScript、Go、Ada、Python、C、Java、PHP所使用的访问限制关键字和约定&#xff1a; 一、JavaScript ### JavaScript访问限制 早期的JavaScript并没有类似…

Web API应用架构设计分析(1)

Web API 是一种应用接口框架&#xff0c;它能够构建HTTP服务以支撑更广泛的客户端&#xff08;包括浏览器&#xff0c;手机和平板电脑等移动设备&#xff09;的框架&#xff0c; ASP.NET Web API 是一种用于在 .NET Framework 上构建 RESTful 应用程序的理想平台。本文主要以AS…

MapXtreme2008中操作矢量符号和定制符号

本文部分说明内容摘自网络文章&#xff0c;经过本人在MapXtreme2008中编写相关的演示例子&#xff0c;详细说明如何操作MapXtreme2008提供的矢量符号和定制符号。 MapXtreme 在其安装过程中自动安装 10 种 MapInfo 特定的 TrueType 字体。这些字体为用户提供了字形符号选择&am…

转载:97特瑞心得

单位里无聊打着玩的心得&#xff0c;写了段时间了&#xff0c;基本是哪天想到什么就打上去&#xff0c;狗屁不通的地方请大家包涵。97特瑞玩了有10年多了吧,97刚出来的时候就玩的特瑞&#xff0c;别人都八神&#xff0c;萝卜特&#xff0c;克拉克的时代我就坚持用特瑞&#xff…

吸气剂/设定者。 邪恶。 期。

从2003年开始&#xff0c;艾伦霍鲁布&#xff08;Allen Holub&#xff09;讨论了为什么吸气剂和塞特方法是邪恶的著名文章&#xff0c;关于吸气剂/塞特方法是否是反模式&#xff0c;应该避免使用&#xff0c;还是我们在面向对象中不可避免地需要它&#xff0c;这是一个古老的争…

【原】.Net创建Excel文件(插入数据、修改格式、生成图表)的方法

1.添加Excel引用 可以在.Net选项卡下添加Microsoft.Office.Interop.Excel引用&#xff0c;或在COM下添加Microsoft Excel 12.0 Object Library。它们都会生成Microsoft.Office.Interop.Excel.dll。 2.创建Excel。 有两种方法创建一个Excel Workbook实例。 1.需要一个模板文件&…