vue transition
Vue.js 教程 (9) : 过渡动画
Vue.js 提供非常简单的过渡动画接口。这些过渡动画在 Vue.js 将目标元素插入或移除出 DOM 的时候会自动执行。能够触发动画的指令包括 v-if
, v-show
和 v-repeat
。同时,vm 实例的 $appendTo()
, $before()
, $after()
和 $remove()
方法也会触发动画。
定义动画的方法有三种:
- CSS transition
- CSS animation
- 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
vue transition相关推荐
- vue transition之slide(fade)效果
使用vue transition标签来完成组件的过渡效果,本文模拟slide效果,也夹杂了淡隐淡出(fade)效果. 结合<component :is=''></component& ...
- vue transition动画
引用: https://www.cnblogs.com/ccyinghua/p/7872694.html https://blog.csdn.net/wxw20147854/article/detai ...
- [vue] transition animate.js
animate.js官网: https://animate.style/ npm install animate.css --save main.js import animated from 'an ...
- vue transition淡入淡出效果
效果图 代码 <template><div id="app"><!-- 点击事件 --><button @click="show ...
- css3 updown 动画,Vue的transition中的slidedown,slideUp展开收起动画
vue transition动画 vue的transition过渡动画在vue官网已有详细教程,就不赘述了.然而当我们使用transition来实现slidedown,slideup的展开收起动画时, ...
- Vue2.0 Transition常见用法全解惑
Vue2.0的过渡系统(transition)有了很大的改变,想把1.0的项目迁移到2.0,着实需要费一些功夫,今天我就要把vue2.0的过渡系统的用法搞清楚,因为之前确实踩了不少坑.这里只涉及单元素 ...
- Vue.js 从 Vue 1.x 迁移
从 Vue 1.x 迁移 FAQ 哇,非常长的一页!是否意味着 Vue 2.0 已经完全不同了呢,是否需要从头学起呢,Vue 1.0 的项目是不是没法迁移了? 非常开心地告诉你,并不是!几乎 90% ...
- js过渡效果_干货 | Vue事件、过渡和制作index页面
" 最近在学习使用Vue作为前端的框架,本文简单介绍Vue的过渡效果,以及记录制作首页的过程. " Vue事件 1方法处理器 ● 可以用v-on指令监听DOM事件 ● 类似于内联表 ...
- vue | 基于vue的城市选择器和搜索城市对应的小区
城市选择器应该是比较常用的一个组件,用户可以去选择自己的城市,选择城市后返回,又根据自己选择的城市搜索小区. 功能展示 这是选择结果 这是选择城市 这是搜索小区 这是搜索小区接口,key为城市名字,i ...
最新文章
- MyBatis批量插入几千条数据慎用foreach
- 在MM32F3273上运行MicroPython,对于性能进行测试
- 调适的时候要注意的一些问题
- wxWidgets 编译 ICON 资源
- Leetcode 动态规划 Trapping Rain Water
- Free SQLSever 2008的书
- ChaiNext:大盘调整,主流币种还未稳住阻力位
- 全连接层和卷积层最终应用在网络上的不同之处
- IOS之未解问题--给UITableView提取UITableViewDataSource并封装瘦身失败
- 微信小程序60s倒计时
- 谈一谈今年的移动互联网寒冬
- excel最常用的快捷键大全:
- [CF106C]Buns
- 云计算和雾计算的区别?
- Vue中使用echart实现中国地图统计图
- BAT等公司高薪招聘Android开发面试题目集锦
- Illustrator国画效果
- 适应不同版本的bdb的代码
- Spring-工作原理
- java程序设计案例_Java程序设计案例教程
热门文章
- 计算机控制系统的稳态误差,计算机控制系统的稳态误差
- 我用AI回怼美女汽车销售系列[yolo车牌识别](五) 完结
- 【IT笔试面试题整理】丑数
- leetcode刷题 153.寻找旋转排序数组中的最小值
- C51 printf修改如何能打印到不同的设备呢?
- Python Data Science的多版本多环境管理工具Anaconda
- java NIO和Reactor模式
- 70后存款100万,有房有车无贷款,每月租金1.5万,可以退休吗?
- MATLAB求音频信号特征的自定义函数.md
- MATLAB拉格朗日插值