VUE学习-优化过渡
过渡（优化）
可复用的过渡
<transition>或者<transition-group>为根的组件Vue.component('my-special-transition', {
template: '<transition name="very-special-transition" mode="out-in"\v-on:before-enter="beforeEnter" v-on:after-enter="afterEnter"\><slot></slot></transition>',
methods: {
beforeEnter: function (el) {
// ...
},
afterEnter: function (el) {
// ...
}
}
})
函数式组件
Vue.component('my-special-transition', {
functional: true,
render: function (createElement, context) {
var data = {
props: {
name: 'very-special-transition',
mode: 'out-in'
},
on: {
beforeEnter: function (el) {
// ...
},
afterEnter: function (el) {
// ...
}
}
}
return createElement('transition', data, context.children)
}
})
动态过渡
所有过渡 attribute 都可以动态绑定，但我们不仅仅只有 attribute 可以利用，还可以通过事件钩子获取上下文中的所有数据，因为事件钩子都是方法。这意味着，根据组件的状态不同，你的 JavaScript 过渡会有不同的表现。
<div id="bind-animation">
FadeIn<input type="range" v-model="fadeIn" max="10" min="0" />{{fadeIn}}
FadeOut<input type="range" v-model="fadeOut" max="10" min="0" />{{fadeOut}}
<button @click="show = show == true ? false : true" >{{show}}</button>
<transition ref="helloTransition" @enter="enterFunt" @leave="leaveFunt">
<h3 ref="hello" v-show="show">hello</h3>
</transition>
</div>
<script>
var vm = new Vue({
el: '#bind-animation',
data(){
return {
fadeIn: 5,
fadeOut: 5,
show: true,
}
},
methods:{
enterFunt(el,done){
this.$refs.hello.style = 'opacity: 1';
this.$refs.hello.style.transitionDuration = this.fadeIn+'s';
},
leaveFunt(el,done){
this.$refs.hello.style = 'opacity: 0';
this.$refs.hello.style.transitionDuration = this.fadeOut+'s';
},
}
})
</script>
<style>
.hello-enter-active,.hello-leave-active{
transition-duration: 5s;
transition-timing-function: ease;
}
</style>
状态过渡
通过侦听器我们能监听到任何数值 property 的数值更新。
<div id="count-roll">
<input v-model="count" type="number" step="10" min="0"/>
<transition name="roll">
<h3 ref="roll">{{frontNum}}</h3>
</transition>
</div>
<script>
var vm = new Vue({
el: '#count-roll',
data(){
return {
count: 0,
frontNum: 0,
intervalID:0,
}
},
watch:{
async count(newV,oldV){
this.intervalID = await setInterval(()=>{
this.rollNum()
},30)
}
},
methods:{
rollNum(){
if(this.frontNum < this.count)this.frontNum++;
else if(this.frontNum > this.count)this.frontNum--;
else clearInterval(this.intervalID)
}
}
})
</script>
<style>
.roll-enter-active{
transition-timing-function: ease;
}
</style>
动态状态过渡
<!DOCTYPE html>
<html>
<head>
<title>Dynamic State Transitions</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/TweenLite.min.js"></script>
<script src="https://unpkg.com/vue@2"></script>
<style>
svg {
display: block;
}
polygon {
fill: #41b883;
}
circle {
fill: transparent;
stroke: #35495e;
}
input[type="range"] {
display: block;
width: 100%;
margin-bottom: 15px;
}
</style>
</head>
<body>
<div id="app">
<svg width="200" height="200">
<polygon :points="points"></polygon>
<circle cx="100" cy="100" r="90"></circle>
</svg>
<label>Sides: {{ sides }}</label>
<input type="range" min="3" max="500" v-model.number="sides" />
<label>Minimum Radius: {{ minRadius }}%</label>
<input type="range" min="0" max="90" v-model.number="minRadius" />
<label>Update Interval: {{ updateInterval }} milliseconds</label>
<input type="range" min="10" max="2000" v-model.number="updateInterval" />
</div>
<script>
new Vue({
el: "#app",
data: function() {
var defaultSides = 10;
var stats = Array.apply(null, { length: defaultSides }).map(function() {
return 100;
});
return {
stats: stats,
points: generatePoints(stats),
sides: defaultSides,
minRadius: 50,
interval: null,
updateInterval: 500
};
},
watch: {
sides: function(newSides, oldSides) {
var sidesDifference = newSides - oldSides;
if (sidesDifference > 0) {
for (var i = 1; i <= sidesDifference; i++) {
this.stats.push(this.newRandomValue());
}
} else {
var absoluteSidesDifference = Math.abs(sidesDifference);
for (var i = 1; i <= absoluteSidesDifference; i++) {
this.stats.shift();
}
}
},
stats: function(newStats) {
// 时间轴实现动画(数据对象，时间周期，点)
TweenLite.to(this.$data, this.updateInterval / 1000, {points: generatePoints(newStats)});
},
updateInterval: function() {
this.resetInterval();
}
},
mounted: function() {
this.resetInterval();
},
methods: {
randomizeStats: function() {
var vm = this;
this.stats = this.stats.map(function() {
return vm.newRandomValue();
});
},
newRandomValue: function() {
return Math.ceil(
this.minRadius + Math.random() * (100 - this.minRadius)
);
},
resetInterval: function() {
var vm = this;
clearInterval(this.interval);
this.randomizeStats();
this.interval = setInterval(function() {
vm.randomizeStats();
}, this.updateInterval);
}
}
});
function valueToPoint(value, index, total) {
var x = 0;
var y = -value * 0.9;
var angle = ((Math.PI * 2) / total) * index;
var cos = Math.cos(angle);
var sin = Math.sin(angle);
var tx = x * cos - y * sin + 100;
var ty = x * sin + y * cos + 100;
return { x: tx, y: ty };
}
function generatePoints(stats) {
var total = stats.length;
return stats.map(function(stat, index) {
var point = valueToPoint(stat, index, total);
return point.x + "," + point.y;
}).join(" ");
}
</script>
</body>
</html>
VUE学习-优化过渡的更多相关文章
- VUE学习总结
VUE学习总结 文档:https://cn.vuejs.org/v2/guide/ Webstorm的一些常用快捷键:1. ctrl + shift + n: 打开工程中的文件,目的是打开当前工程下任 ...
- day 81 Vue学习一之vue初识
Vue学习一之vue初识 本节目录 一 Vue初识 二 ES6的基本语法 三 Vue的基本用法 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 vue初识 vue称为渐进式js ...
- Vue 学习文档
Vue 学习文档 vue 起步 引包 启动 new Vue(options) options: el 目的地(可以用类名.标签名等,也可以直接用mod元素) #elementId .elementCl ...
- vue学习之路 - 4.基本操作（下）
vue学习之路 - 4.基本操作(下) 简述:本章节主要介绍 vue 的一些其他常用指令. Vue 指令 这里将 vue 的指令分为系统内部指令(vue 自带指令)和用户自定义指令两种. 系统内部指令 ...
- vue学习笔记(八)组件校验&通信
前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...
- vue学习笔记(十)路由
前言 在上一篇博客vue学习笔记(九)vue-cli中的组件通信内容中,我们学习组件通信的相关内容和进行了一些组件通信的小练习,相信大家已经掌握了vue-cli中的组件通信,而本篇博客将会带你更上一层 ...
- vue学习【二】vue结合axios动态引用echarts
大家好,我是一叶,本篇是vue学习的第二篇,本篇将要讲述vue结合axios动态引用echarts. 在vue中,异步刷新使用的是axios,类似于大家常用的ajax,其实axios已经是vue的第二 ...
- day 83 Vue学习之五DIY脚手架、webpack使用、vue-cli的使用、element-ui
Vue学习之五DIY脚手架.webpack使用.vue-cli的使用.element-ui 本节目录 一 vue获取原生DOM的方式 二 DIY脚手架 三 vue-cli脚手架的使用 四 we ...
- day 83 Vue学习四之过滤器、钩子函数、路由、全家桶等
Vue学习四之过滤器.钩子函数.路由.全家桶等 本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤 ...
- day 80 Vue学习一之vue初识
Vue学习一之vue初识 本节目录 一 Vue初识 二 ES6的基本语法 三 Vue的基本用法 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 vue初识 vue称为渐进式js框架 ...
随机推荐
- [编程基础] Python对象的浅拷贝与深拷贝笔记
Python中的赋值语句不创建对象的副本,它们只将名称绑定到对象.对于不可变的对象,这通常没有什么区别.但是对于处理可变对象或可变对象的集合,您可能需要寻找一种方法来创建这些对象的"真实副本 ...
- 算法学习笔记(5): 最近公共祖先(LCA)
最近公共祖先(LCA) 目录 最近公共祖先(LCA) 定义 求法 方法一:树上倍增 朴素算法 复杂度分析 方法二:dfs序与ST表 初始化与查询 复杂度分析 方法三:树链剖分 DFS序 性质 重链 重 ...
- Linux操作系统导学专栏（一）——专栏要讲些什么？
该专栏是为Linux内核开发编程做铺垫,如果你对操作系统很熟悉,想了解一些Linux内核发开的知识,请直接跳转至<Linux内核编程专栏>,如果你对Linux内核编程也很熟悉,想了解L ...
- 使用 NineData 高效编写 SQL
SQL 是 Structured Query Language 的缩写,中文翻译为"结构化查询语言".它是关系型数据库的标准语言,所有的关系型数据库管理系统(RDBMS),比如 M ...
- 简述 JavaScript 的执行机制
一.单线程 为了解决这个问题,防止下一个任务等待上一个任务等待太长的时间,所以提出了 Web Worker标准,允许 JS 创建多个线程,于是JS出现了同步 和 异步 ,异步就是可以同时进行多个任务, ...
- Spring boot 3.0 日志
spring boot 3.0 已经自己集成了日志功能 logback SpringBoot 启动时自动加载配置文件,配置文件的默认名称为: logback.xml 或 logback-test.x ...
- 【已解决】csv数据导入sql by sqlyog 乱码+无法导入导入步骤分析等总结
csv数据导入sql 用sqlyog工具 首先是创建一个数据库 --> 然后右键点击数据库->选择创建表 ->表名自己写,让在引擎这里选择csv 然后注意 把非空都勾选了!不然会报错 ...
- Jetpack Compose学习(10)——使用Compose物料清单BOM，更好管理依赖版本
原文地址:Jetpack Compose学习(10)--使用Compose物料清单BOM,更好管理依赖版本 - Stars-One的杂货小窝 本期讲解下关于Android推出的BOM来简化我们添加co ...
- yaml进阶用法
我们知道 json 是 yaml 的子集,作为超集的 yaml,必然有着很多与 json 不一样的特性,比如定义变量.引用.拼接等,下面来看看吧~ 为了方便和python的字典快速对比,我们直接使用y ...
- 题解 P7623 [AHOI2021初中组] 收衣服
我还在小学的时候以现在初中名义我大五十牛逼参加了这次,然后身败名裂死磕这道题不会,现在觉得自己好傻啊 233333 显然这是要统计每个区间的贡献,所以我们可以打出来这个暴力,统计每个区间的次数,对于 ...