vue的动画组件（transition）
当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：
自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。
v-enter: 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。
v-enter-active: 定义过渡的状态。在元素整个过渡过程中作用，在元素被插入时生效，在 transition/animation 完成之后移除。 这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入一帧后生效（于此同时 v-enter 被删除），在 transition/animation 完成之后移除。
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。
v-leave-active: 定义过渡的状态。在元素整个过渡过程中作用，在离开过渡被触发后立即生效，在 transition/animation 完成之后移除。 这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发一帧后生效（于此同时 v-leave 被删除），在 transition/animation 完成之后移除。
配合上css的动画库，我们会有很好的效果：https://unpkg.com/animate.css@3.5.1/animate.min.css"
demo01:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../lib/vue.js" type="text/javascript"></script>
<link href="https://unpkg.com/animate.css@3.5.1/animate.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="app4">
<button @click="show = !show">toggle coustom class</button>
<transition name="bounce"
enter-active-class="animated tada"
leave-active-class="animated bounceOutRight">
<p v-if="show">自定义过渡类名</p>
</transition>
</div>
</body>
</html>
<script>
new Vue({
el:'#app4',
data:{
show:true
}
})
</script>
对于这些在 enter/leave 过渡中切换的类名，v- 是这些类名的前缀。使用
<transition name="my-transition" 可以重置前缀，比如 v-enter 替换为 my-transition-enter。
demo02
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../lib/vue.js" type="text/javascript">
</script>
<script src="../lib/vue_router.js"></script>
<style>
.fade-enter-active,.fade-leave-active{
transition: all .3s; }
.fade-enter,.fade-leave-to{
opacity:
} .style-enter-active,.style-leave-active{
transition: all .3s; }
.style-enter,.style-leave-to{
opacity:
}
</style>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签(默认)，你也可以改变 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
<router-link to="/foo/ff">Go to foo ff</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<!---name="fade" fade成为类名的前缀（我们也可以进行自定义）---->
<!--<transition name="fade" mode="out-in">
<keep-alive>
<router-view></router-view>
</keep-alive>
</transition>
-->
<transition name="style" mode="out-in">
<!--transition是vue的动画组件，会自动监听其中元素得状态改变，为其--->
<router-view></router-view>
</transition>
</div>
</body>
</html>
<script>
// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const Foo_ff={template: '<p>foo_ff</p>'}
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
{ path: '/foo', component: Foo },
{ path: '/foo/ff', component: Foo_ff },
{ path: '/bar', component: Bar },
] // 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
routes // （缩写）相当于 routes: routes }) // 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
router
}).$mount('#app') </script>
如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机会被自动调用。
如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作（插入/删除）在下一帧中立即执行。
v-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">
钩子函数配合velocity.js动画使用，来完成动画效果，感觉不错（并且js动画相比css动画的好处，我不知道,好像可以百度到）
https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js
http://velocityjs.org/#reverse
demo
<!--http://velocityjs.org/#reverse--> <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../lib/vue.js"></script>
</head>
<body>
<div id="app5">
<button @click="show = !show">toggle hook</button>
<transition @before-enter="beforeEnter"
@enter="enter"
@leave="leave"
:css="false">
<p v-if="show">javascript 钩子使用</p>
</transition>
</div>
</body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<script >
new Vue({
el:'#app5',
data:{
show:false
},
methods:{
beforeEnter:function (el) {
console.log(el);
alert("beforeEnter");
el.style.opacity =
el.style.transformOrigin = 'left'
},
enter:function (el, done) {
alert("enter");
// console.log(done);
Velocity(el, {opacity:, fontSize:'1.4em'}, {duration:});
Velocity(el, {fontSize:'1em'}, {complete:done});
Velocity(el,"reverse", { duration: });
Velocity(el,{
borderBottomWidth: [ "2px", "spring" ], // Uses "spring"
width: [ "100px", [ , ] ], // Uses custom spring physics
height: "100px" // Defaults to easeInSine, the call's default easing
}, {
easing: "easeInSine" // Default easing
});
},
leave:function (el, done) {
Velocity(el, {translateX:'15px', rotateZ:'50deg'}, {duration:})
Velocity(el, {rotateZ:'100deg'}, {loop:})
Velocity(el,{
rotateZ:'45deg',
translateY:'30px',
translateX:'30px',
opacity:
}, {complete:done})
}
}
})
</script>
参考：http://www.chairis.cn/blog/article/27
vue的动画组件（transition）的更多相关文章
- vue内置组件——transition简单原理图文详解
基本概念 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.css 在过渡 ...
- vue内置组件 transition 和 keep-alive 使用
1.transition name - string,用于自动生成 CSS 过渡类名.例如:name: 'fade' 将自动拓展为.fade-enter,.fade-enter-active等.默认类 ...
- Vue过渡动画运用transition
vue的过渡动画,主要是transition标签的使用,配合css动画实现的.官方文档css过渡 通过点击事件来切换show的值来改变显示的文本,下面的css通过进入离开时的在匀速状态下xxs(秒)下 ...
- 基于 React 实现一个 Transition 过渡动画组件
过渡动画使 UI 更富有表现力并且易于使用.如何使用 React 快速的实现一个 Transition 过渡动画组件? 基本实现 实现一个基础的 CSS 过渡动画组件,通过切换 CSS 样式实现简单的 ...
- Vue.js说说组件
什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTM ...
- vue.js之组件篇
Vue.js 组件 模块化:是从代码逻辑的角度进行划分的: 组件化:是从UI界面的角度进行划分的. 组件(Component)是 Vue.js 最强大的功能之一,组件可以扩展 HTML 元素,封装可重 ...
- Vue.js 动画
transition 动画: 当插入或删除包含在 transition 组件中的元素时,Vue将会做以下处理: 1.自动嗅探目标元素是否应用了css过滤或动画,如果是,在恰当的时机添加/删除c ...
- 从零开始学 Web 之 Vue.js（五）Vue的动画
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- vue 的动画
1.vue 的动画流程分为enter,和leave分别对应以下两幅图 <!doctype html><html lang="en"><head> ...
随机推荐
- 解决Mac外接显示器分辨率不正确问题
解决Mac外接显示器分辨率不正确问题 TAT: 今天被坑惨了,重新安装了Mavericks后,使用thunderbolt转VGA外接显示器时遇到了分辨率的问题:外接显示器支持1080P的分辨率,但在O ...
- Pytorch 一些函数用法
PyTorch中view的用法:https://blog.csdn.net/york1996/article/details/81949843 max用法 import torch d=torch.T ...
- JavaScript中Function Declaration与Function Expression 或者说 function fn(){}和var fn=function(){} 的区别
JavaScript是一种解释型语言,函数声明会在JavaScript代码加载后.执行前被解释,而函数表达式只有在执行到这一行代码时才会被解释. 在JS中有两种定义函数的方式, 1是:var aaa= ...
- 【转】ubuntu下如何将笔记本自带的键盘关闭
想必大家都经历过这样的情况:在使用usb接口的外接键盘的时候,很容易按到笔记本自带的键盘,从而导致输入错误.尤其是你将外接键盘放在笔记本键盘上面的时候.怎么解决这个问题呢? 搜索之后,找到了答案.注意 ...
- 关于Mac上使用ideviceinstaller操作iPhoneXR等24位UDID设备报“ERROR: Invalid UDID specified”解决办法
最近新申请了一台iPhone XR, 测试时发现使用ideviceinstaller命令老是报错: Jackeys-MacBook-Pro:~ jackey$ ideviceinstaller -u ...
- 练习-99乘法表 token生成器 翻译小工具
一.99乘法表 1.1 技术点 记住: for 循环的使用,以及for的嵌套使用 range()的使用,掌握sep为负数的使用的使用. print() 函数的使用,默认的结尾的换行符 替换 end= ...
- C++高级编程2. 静态动态链接库
C++高级编程2. 静态动态链接库20131018 1.动态链接库和静态链接库的区别: 静态链接库就是把lib文件中用到的函数代码直接连接进目标程序,程序运行的时候不在需要其他的库文件:动态链接库是把 ...
- 多进程回声服务器/客户端【linux】
并发服务器端 #include <unistd.h> #include <stdio.h> #include <sys/wait.h> #include <c ...
- DBMS_OUTPUT(用于输入和输出信息)
1.概述 作用:用于输入和输出信息,使用过程PUT和PUT_LINES可以将信息发送到缓冲区,使用过程GET_LINE和GET_LINES可以显示缓冲区信息.该包用来输出plsql变量的值,属于系统用 ...
- 利用Docker编译Hadoop 3.1.0
前言 为什么要使用Docker编译,请自行百度 操作系统环境:Centos 6.8 uname -r 内核版本:2.6.32-642.el6.x86_64 除非有把握否则不要在Centos6.8中直接 ...