vue transition

Vue.js 教程 (9) : 过渡动画

Vue.js 提供非常简单的过渡动画接口。这些过渡动画在 Vue.js 将目标元素插入或移除出 DOM 的时候会自动执行。能够触发动画的指令包括 v-if , v-show 和 v-repeat。同时,vm 实例的 $appendTo() , $before() , $after() 和 $remove() 方法也会触发动画。

定义动画的方法有三种:

  1. CSS transition
  2. CSS animation
  3. JavaScript 函数

CSS Transition

要使用 CSS Transition 动画,只需要在目标元素上添加 v-transition 指令:

<p class="msg" v-if="show" v-transition>Hello!</p>

然后,你需要为目标元素定义两个 CSS 类: .v-enter 和 .v-leave . 这其中:

  • .v-enter 代表元素刚刚被插入 DOM 瞬间的状态。它会在插入前被添加,然后 Vue.js 会强制浏览器刷新视图,然后 v-enter 会被立刻移除,从而触发 transition。
  • .v-leave 代表元素即将被从 DOM 中移除的瞬间的状态。Vue.js 会在侦听到 transitionend 事件以后移除它。

需要注意的是你得确保该元素在添加这两个类的时候会触发 CSS transition,不然 Vue.js 侦听不到 transitionend 事件,动画就卡在那里了。

.msg {transition: all .3s ease;height: 30px; padding: 10px; background-color: #eee; overflow: hidden; } .msg.v-enter, .msg.v-leave { height: 0; padding: 0 10px; opacity: 0; }

现在,当 show 变化的时候,Vue.js 会插入/移除该元素,并自动在合适的时候添加 CSS 类。

CSS Animation

CSS Animation 使用方式和 transition 大同小异,换成使用 v-animation 指令,不同的地方是 v-enter 现在不是在插入后立刻移除,而是在侦听到 animationend 事件后才移除。

<p class="animated" v-if="show" v-animation>Look at me!</p>

CSS 里你需要定义两个动画 keyframes,分别对应进场和出场动画:(这里省略了webkit前缀)

.animated {display: inline-block;
}.animated.v-enter { animation: fadein .5s; } .animated.v-leave { animation: fadeout .5s; } @keyframes fadein { 0% { transform: scale(0); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } } @keyframes fadeout { 0% { transform: scale(1); } 50% { transform: scale(1.5); } 100% { transform: scale(0); } }

JavaScript 函数动画

JS 函数动画需要通过 Vue.effect 方法来注册一个效果,包括一个进场函数和一个出场函数:

Vue.effect('my-effect', {enter: function (el, insert, timeout) { // insert() 会将元素插入 DOM }, leave: function (el, remove, timeout) { // remove() 会将元素移除出 DOM } })
<p v-effect="my-effect"></p>

第三个参数 timeout 是一个 Vue.js 版本的 setTimeout 函数。使用方法完全一样,但使用这个函数的好处是,当一个元素的状态切换过快,上一个动画函数设置的 timer 还没有触发就进入下一个动画函数的时候, Vue.js 会确保之前未触发的 timer 都被取消,不需要开发者手动管理 timer。


过渡动效

<router-view> 是基本的动态组件,所以我们可以用 <transition> 组件给它添加一些过渡效果:

<transition><router-view></router-view> </transition> 

<transition> 的所有功能 在这里同样适用。

单个路由的过渡

上面的用法会给所有路由设置一样的过渡效果,如果你想让每个路由组件有各自的过渡效果,可以在各路由组件内使用 <transition> 并设置不同的 name。

const Foo = {template: `<transition name="slide"><div class="foo">...</div></transition>`
}const Bar = {template: `<transition name="fade"><div class="bar">...</div></transition>`
}

基于路由的动态过渡

还可以基于当前路由与目标路由的变化关系,动态设置过渡效果:

<!-- 使用动态的 transition name -->
<transition :name="transitionName"> <router-view></router-view> </transition> 
// 接着在父组件内
// watch $route 决定使用哪种过渡
watch: {'$route' (to, from) {const toDepth = to.path.split('/').length const fromDepth = from.path.split('/').length this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left' } } 

查看完整例子 这里.

转载于:https://www.cnblogs.com/avon/p/6030875.html

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

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

相关文章

VS扩展工具

原文发布时间为&#xff1a;2011-03-09 —— 来源于本人的百度文章 [由搬家工具导入]http://visualstudiogallery.msdn.microsoft.com/site/search?f%5B0%5D.TypeRootCategory&f%5B0%5D.Valuetools转载于:https://www.cnblogs.com/handboy/p/7163982.html

工业相机5A参数及其对图像采集的影响

有些相机会提到5A功能&#xff0c;指的是: Automatic Shutter(自动快门)、Automatic Gain&#xff08;自动增益&#xff09;、Automatic IRIS&#xff08;自动光圈&#xff09;、Automatic Gamma&#xff08;自动伽马&#xff09;、Automatic White Balance&#xff08;自动白平…

DM6446 OSD

DM6446 OSD TMS320DM6446支持背景窗颜色&#xff0c;两个视频窗口&#xff0c;两个OSD窗口&#xff0c;一个指针(cursor)窗口。它们以递增的顺序排列&#xff1a;一个特有的第二个OSD窗口&#xff08;OSDWIN1&#xff09;可以用来配置成属性窗口来控制视频窗口和第一个OSD窗口&…

DOS的一些常用命令

原文发布时间为&#xff1a;2011-02-12 —— 来源于本人的百度文章 [由搬家工具导入]DOS远程桌面连接命令 mstsc /v: 192.168.1.250 /consolecmd 运行 command删除文件 rd 文件名/S创建文件 MD 文件名 1. net user admin godmour /add 新建一个…

机器视觉工业镜头-Computar

日本Computar镜头&#xff0c;全球工业镜头、CCTV镜头市场占有率第一。CBC板式会社成立于1925年&#xff0c;总部在日本东京。1960年 CBC香港公司成立&#xff0c;是computar镜头走向国际市场的前奏。 1979年 研制出第一只手动变焦镜头。 1985年 研制出第一款非球面高速镜头。1…

C++编程经验总结1

面向对象的精髓&#xff1a; 主函数其实就是对于类的元素和动作的重新组合来进行一项活动。 一个思想概念&#xff1a;程设是清楚的&#xff0c;完美的。 数学是清楚的&#xff0c;是完美的。 物理是有趣的&#xff0c;尤其是量子物理 生物是清楚的&#xff0c;尤其是基因 外语…

DM365的BSP源码分析-基于2.6.18内核

DM365的BSP主要包含mach-davinci和plat-davinci两个目录&#xff08;及相关头文件&#xff09;&#xff0c;BSP复杂庞大又极其重要&#xff0c;它主要完成了板级的初始化&#xff0c;比如内存映射&#xff0c;时钟和电源初始化&#xff0c;中断和IO初始化&#xff0c;CPU及各模…

第四章:Django 模型 —— 设计系统表

1. Django框架提供了完善的模型&#xff08;Model &#xff09;层来创建和存储数据&#xff0c;每一个模型对应数据库中的唯一的一张表。 2. Django 模型基础知识&#xff1a; 。每一本模型是一个Python类&#xff0c;继承了django.db.models.Model类 。该模型中每一个属性一个…

DM365 使用BT656协议驱动LCD的实现

前两天已经调好了&#xff0c;主要是对davinci_platform.c的修改 因为输入输出都为pal的制式&#xff0c;所以就在pal的函数中进行了修改。 在PAL设置的函数中&#xff0c;修改如下&#xff1a; /* * setting PAL mode */ static void davinci_enc_set_pal(struct vid_enc_mode…

工业视觉镜头NAVITAR

品牌介绍 美国NAVITAR是优越的上等光学系统制造商和供应商&#xff0c;工业视觉镜头NAVITAR为机器视觉、检测和生物医学诊断行业提供的定制光学解决方案。 工业视觉镜头NAVITAR用于鉴定产品、检查产品缺陷、测量零件尺寸、操纵机器人设备和协助进行科学分析与探索。 还用来引导…

TCP系列48—拥塞控制—11、FRTO拥塞撤销

一、概述FRTO虚假超时重传检测我们之前重传章节的文章已经介绍过了&#xff0c;这里不再重复介绍&#xff0c;针对后面的示例在说明两点1、FRTO只能用于虚假超时重传的探测&#xff0c;不能用于虚假快速重传的探测。2、延迟ER重传触发的进入Recovery状态时候&#xff0c;并不会…

娱乐一下

6年前&#xff0c;没几个人知道尤里米尔纳&#xff08;Yuri Milner&#xff09;是谁。但今天&#xff0c;他已经是地球上最有名的投资人了。 短短几年内&#xff0c;这家伙掌管的风险投资基金DST&#xff08;数字天空科技&#xff09;投遍了全球的互联网明星企业&#xff0c;并…

机器视觉行业市场现状及发展前景分析

1.中国的机器视觉起步较晚&#xff0c;目前正处于快速增长期。 我国机器视觉最早起源于20世纪80年代。机器视觉生产线和先进设备自1998年众多电子、半导体企业落户广东、上海以来&#xff0c;先后在国内诞生了国际代理商和机器视觉系统集成商。 第一个阶段是1999-2003年的启蒙…

从bootm 命令讲起/U-boot的环境变量: bootcmd 和bootargs

从bootm 命令讲起 1 找到linux的内核入口 Bootm命令通过读取uImage的头部040字节的信息&#xff0c;将uImage定位到正确的地址&#xff0c;同时找到linux的内核入口地址。 这个地方就涉及到uImage的头部040字节信息到底是什么的问题?uboot提供了mkimage命令去把040字节加在lin…

关于创建SWAP示例

cd /data 进入指定目录dd if/dev/zero of/data/swapfile bs1M count102400【参数说明】if文件名&#xff1a;输入文件名&#xff0c;缺省为标准输入。即指定源文件。< ifinput file >of文件名&#xff1a;输出文件名&#xff0c;缺省为标准输出。即指定目的文件。< of…

一个公式来说明加接圈的作用和缺点

一个公式来说明加接圈的作用和缺点 在很多视觉项目中&#xff0c;如果想要将视野缩小&#xff0c;一种方式是换用长焦镜头&#xff1b;另一种方式则是通过加接圈的方式来实现。那么&#xff0c;接圈到底改变的是什么参数&#xff0c;能够使图像进行放大呢&#xff1f;核心公式上…

bzoj4636: 蒟蒻的数列

作为惟一一个离线动态开点线段树的。。我是不是没救了。。 维护一下区间修改和区间和。。。 然而由于一些奇怪的原因翻车 到最后索性跑到一个点直接开左右儿子 最后注意区间左右端点可以相等。。。 1 #include<cstdio>2 #include<iostream>3 #include<algorithm…

module_param 在内核编程中的作用

module_param 在用户态下编程可以通过main()的来传递命令行参数&#xff0c;而编写一个内核模块则通过module_param()! module_param的作用一.module_param1.为什么引入 在用户态下编程可以通过main()来传递命令行参数&#xff0c;而编写一个内核模块则可通过module_param()来传…

ubuntu 备忘

卷组扩容 Linux mint采用默认卷组的安装方式 sainLinux ~ $ df -hl Filesystem Size Used Avail Use% Mounted on udev 3.7G 0 3.7G 0% /dev tmpfs 743M 9.5M 733M 2% /run /dev/mapper/mint--vg-root…