transition:

<div id="demo">
<button v-on:click="show = !show">
Toggle
</button>
<transition name="fade">
<p v-if="show">hello</p>
</transition>
</div> 默认样式名:enter,enter-active,enter-to, leave,leave-active,leave-to
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-to {
opacity:
}
//使用animation:

.fade-enter-active {
animation: bounce-in .5s;
}
.fade-leave-active {
animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
% {
transform: scale();
}
% {
transform: scale(1.5);
}
% {
transform: scale();
}
}
自定义样式名:

<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
<div id="example-3">
<button @click="show = !show">
Toggle render
</button>
<transition
name="custom-classes-transition"
enter-active-class
="animated tada"
leave-active-class
="animated bounceOutRight"
>
<p v-if="show">hello</p>
</transition>
</div>

使用 type特性可以设置 animation 或 transition 需要 Vue 监听的类型

动画的持续时间:
<transition :duration="{ enter: 500, leave: 800 }">...</transition>

js钩子:

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<div id="example-4">
<button @click="show = !show">
Toggle
</button>
<transition
v-on:before-enter="beforeEnter"
v-on:enter
="enter"
v-on:leave
="leave"
v-bind:css
="false"
>
<p v-if="show">
Demo
</p>
</transition>
</div> new Vue({
el: '#example-4',
data: {
show: false
},
methods: {
beforeEnter: function (el) {
el.style.opacity =
el.style.transformOrigin = 'left'
},
enter: function (el, done) {//enter,leave函数中done是必须的
Velocity(el, { opacity: , fontSize: '1.4em' }, { duration: })
Velocity(el, { fontSize: '1em' }, { complete: done })
},
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 })
}
}
})

初始节点过渡:

//可以通过 appear 特性设置节点的在初始渲染的过渡
<transition
appear
appear-class="custom-appear-class"
appear-to-class="custom-appear-to-class" (2.1.+)
appear-active-class="custom-appear-active-class"
>
<!-- ... -->
</transition>
<transition
appear
v-on:before-appear="customBeforeAppearHook"
v-on:appear="customAppearHook"
v-on:after-appear="customAfterAppearHook"
v-on:appear-cancelled="customAppearCancelledHook"
>
</transition>

多个元素过渡:

<transition>
<button v-bind:key="isEditing">
{{ isEditing ? 'Save' : 'Edit' }}
</button>
</transition>

过渡模式:

in-out:新元素先进行过渡,完成之后当前元素过渡离开。
out-in:当前元素先进行过渡,完成之后新元素过渡进入。

多个组件的过渡:只需要用动态组件,不必设key

<transition name="component-fade" mode="out-in">
<component v-bind:is="view"></component>
</transition> new Vue({
el: '#transition-components-demo',
data: {
view: 'v-a'
},
components: {
'v-a': {
template: '<div>Component A</div>'
},
'v-b': {
template: '<div>Component B</div>'
}
}
})
.component-fade-enter-active, .component-fade-leave-active {
transition: opacity .3s ease;
}
.component-fade-enter, .component-fade-leave-to
/* .component-fade-leave-active for below version 2.1.8 */ {
opacity: ;
}

列表过渡:<transition-group>,它会以一个真实元素呈现:默认为一个 <span>,也可以通过 tag 特性更换为其他元素。

<div id="list-demo" class="demo">
<button v-on:click="add">Add</button>
<button v-on:click="remove">Remove</button>
<transition-group name="list" tag="p">
<span v-for="item in items" v-bind:key="item" class="list-item">
{{ item }}
</span>
</transition-group>
</div>
.list-enter-active, .list-leave-active {
transition: all 1s;
}
.list-enter, .list-leave-to
/* .list-leave-active for below version 2.1.8 */ {
opacity: ;
transform: translateY(30px);
}
列表的排序过渡
<div id="flip-list-demo" class="demo">
<button v-on:click="shuffle">Shuffle</button>
<transition-group name="flip-list" tag="ul">
<li v-for="item in items" v-bind:key="item">
{{ item }}
</li>
</transition-group>
</div> .flip-list-move {
transition: transform 1s;
}

FLIP 过渡的元素不能设置为 display: inline

动态过渡:

<transition v-bind:name="transitionName">
<!-- ... -->
</transition>

状态过渡:通过观察者我们能监听到任何数值属性的数值更新

<script src="https://cdn.jsdelivr.net/npm/tween.js@16.3.4"></script>
<div id="example-8">
<input v-model.number="firstNumber" type="number" step=""> +
<input v-model.number="secondNumber" type="number" step=""> =
{{ result }}
<p>
<animated-integer v-bind:value="firstNumber"></animated-integer> +
<animated-integer v-bind:value="secondNumber"></animated-integer> =
<animated-integer v-bind:value="result"></animated-integer>
</p>
</div> Vue.component('animated-integer', {
template: '<span>{{ tweeningValue }}</span>',
props: {
value: {
type: Number,
required: true
}
},
data: function () {
return {
tweeningValue:
}
},
watch: {
value: function (newValue, oldValue) {
this.tween(oldValue, newValue)
}
},
mounted: function () {
this.tween(, this.value)
},
methods: {
tween: function (startValue, endValue) {
var vm = this
function animate () {
if (TWEEN.update()) {
requestAnimationFrame(animate)
}
}
new TWEEN.Tween({ tweeningValue: startValue })
.to({ tweeningValue: endValue }, )
.onUpdate(function () {
vm.tweeningValue = this.tweeningValue.toFixed()
})
.start()
animate()
}
}
}) // 所有的复杂度都已经从 Vue 的主实例中移除!
new Vue({
el: '#example-8',
data: {
firstNumber: ,
secondNumber:
},
computed: {
result: function () {
return this.firstNumber + this.secondNumber
}
}
})

vue-9-动画的更多相关文章

  1. 从零开始学 Web 之 Vue.js(五)Vue的动画

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  2. vue 的动画

    1.vue 的动画流程分为enter,和leave分别对应以下两幅图 <!doctype html><html lang="en"><head> ...

  3. 049——VUE中使用animation与transform实现vue的动画效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. vue的动画组件(transition)

    当插入或删除包含在 transition 组件中的元素时,Vue 将会做以下处理: 自动嗅探目标元素是否应用了 CSS 过渡或动画,如果是,在恰当的时机添加/删除 CSS 类名. v-enter: 定 ...

  5. vue学习指南:第十篇(详细) - Vue的 动画

    Vue 提供了一些不同的过度效果,主要根 v-if v-show 动态组件 1. Vue给动画分了6个过程,在css中,扮演6个类, 1.  .v-enter定义动画的开始状态 2.  .v-ente ...

  6. Vue.js动画在项目使用的两个示例

    欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 李萌,16年毕业,Web前端开发从业者,目前就职于腾讯,喜欢node.js.vue.js等技术,热爱新技术,热 ...

  7. [原]浅谈vue过渡动画,简单易懂

    在vue中什么是动画 开始先啰嗦一下,动画的解释(自我理解

  8. Vue.js 动画

    transition 动画: 当插入或删除包含在 transition 组件中的元素时,Vue将会做以下处理:     1.自动嗅探目标元素是否应用了css过滤或动画,如果是,在恰当的时机添加/删除c ...

  9. vue过渡动画

    概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.c ...

  10. router使用以及vue的动画效果

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

随机推荐

  1. 关于MySQL大量数据分页查询优化

    select * form user id in(select id from user limit 1000000,10);

  2. (转)c# 互斥锁

    ----------------------------------------------文章1---------------------------------------------- 互斥锁( ...

  3. Linux 各种软件的安装-ElasticSearch

    安装elasticSearch之前先将一个问题: 重启服务器后发现 ssh上不去了,后来采用另外一种方式登录进去发现 sshd服务没启动. 解决过程:先查看sshd的状态 service sshd s ...

  4. C#读取text内容并且于testbox中展现 保留换行实现方法

    直接上代码 //新建一个储存的list List<string> listLines = new List<string>(); StreamReader sr = new S ...

  5. p1457 The Castle

    原图找最大的房间及房间数很容易.然后从左下到右上找拆的位置.拆掉再bfs一次找面积. #include <iostream> #include <cstdio> #includ ...

  6. 关于Handler中Message的创建问题

    Message用来定义一个包含任意数据的消息对象,这个消息对象是可以被发送给Handler处理的. 我们最好通过Message.obtain()和Handler.obtatinMessage()来得到 ...

  7. android主流开源库

    网络框架:Volley 和 Async Volley特点:能使网络通信更快,更简单.更健壮 Get,Post网络请求及网络图像的高效率 Async:高效的网络数据请求, 解析成json 持久化cook ...

  8. appium自动化环境搭建(python语言开发)

    简述 1.安装jdk,配置环境变量 2.安装AndroidSDK,配置环境变量 3.安装Python 4.安装Python集成开发环境PyCharm 5.安装node 6.安装appium服务端 7. ...

  9. jenkins 构建selenium python (浏览器驱动是chromedriver)的解决方法

    1.在chrome浏览去中输入chrome://version  查看chrome 的安装位置 2.将chromedriver 驱动添加到可执行文件路径中 3.在Jenkins中 的系统设置中-环境变 ...

  10. Spring中添加新的配置表,并对新的配置表进行处理

    实习过程中boss交代的任务(以下出现的代码以及数据只给出小部分,提供一个思路) 目的:Spring中添加新的配置表,并对新的配置表进行处理:替换的新的配置表要友好,同时保证替换前后功能不能发生变化. ...