vue-9-动画
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>
多个元素过渡:
过渡模式:
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-动画的更多相关文章
- 从零开始学 Web 之 Vue.js(五)Vue的动画
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- vue 的动画
1.vue 的动画流程分为enter,和leave分别对应以下两幅图 <!doctype html><html lang="en"><head> ...
- 049——VUE中使用animation与transform实现vue的动画效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue的动画组件(transition)
当插入或删除包含在 transition 组件中的元素时,Vue 将会做以下处理: 自动嗅探目标元素是否应用了 CSS 过渡或动画,如果是,在恰当的时机添加/删除 CSS 类名. v-enter: 定 ...
- vue学习指南:第十篇(详细) - Vue的 动画
Vue 提供了一些不同的过度效果,主要根 v-if v-show 动态组件 1. Vue给动画分了6个过程,在css中,扮演6个类, 1. .v-enter定义动画的开始状态 2. .v-ente ...
- Vue.js动画在项目使用的两个示例
欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 李萌,16年毕业,Web前端开发从业者,目前就职于腾讯,喜欢node.js.vue.js等技术,热爱新技术,热 ...
- [原]浅谈vue过渡动画,简单易懂
在vue中什么是动画 开始先啰嗦一下,动画的解释(自我理解
- Vue.js 动画
transition 动画: 当插入或删除包含在 transition 组件中的元素时,Vue将会做以下处理: 1.自动嗅探目标元素是否应用了css过滤或动画,如果是,在恰当的时机添加/删除c ...
- vue过渡动画
概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.c ...
- router使用以及vue的动画效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
随机推荐
- JAVA中”单引号”,“双引号”,“没有单引号和双引号”区别:
单引号引的数据 是char类型的——>单引号只能引一个字符(表示单个字符)双引号引的数据 是String类型的——>而双引号可以引0个及其以上(引用字符串) char类型的值用单引号引起来 ...
- 雷林鹏分享:XML 用途
XML 用途 XML 应用于 Web 开发的许多方面,常用于简化数据的存储和共享. XML 把数据从 HTML 分离 如果您需要在 HTML 文档中显示动态数据,那么每当数据改变时将花费大量的时间来编 ...
- JSON和Serialize数据格式的对比
1.相同点: 都是把其它数据类型转换为可传输的字符串 都是结构性数据 2.不同点: JSON比Serialize序列后的格式要简洁 Serialize序列化的数据格式保存数据原有类型 3.扩展 JSO ...
- css图片的全屏显示代码-css3
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...
- BGP - 5,BGP属性
metric,自己决定去哪个EBGP邻居 local-pre,影响AS内部IBGP邻居的路由决策 med,影响AS外部EBGP邻居的路由决策 1,BGP属性 公认传递(well-known ...
- python3-知识扩展扫盲易忘-map,collections.Counter()的用法
map() 会根据提供的函数对指定序列做映射. 第一个参数 function 以参数序列中的每一个元素调用 function 函数,返回包含每次 function 函数返回值的新列表. >> ...
- linux进程管理之优先级
进程优先级 nice ==================================================================================== Linu ...
- VueJs大全;vee-validate(一个验证vue插件), bootstrap-vue, axios简介。
Vue.js大全(包括依赖,插件,好的指导文章等!)
- ModelViewSet 视图集 实现接口
一.创建项目 1.创建 项目 : django-admin startprojet drf 2. 创建 两个app ------ app1 ,book python manage.py start ...
- 【洛谷p2837】晚餐队列安排
(一定要先贴一下wz大佬对这道题的定位:) 另外说一句:我终于在拖了nnnnnnnnn天之后做完了这道题 算法标签:(其实也用不到辽上面都有)但我就是要贴一下咬我啊) 好啦好啦,上 思路: 首先为了节 ...