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框架 ...
随机推荐
- P8340 [AHOI2022] 山河重整
\(20pts\) 给 \(O(2^n)\) 枚举,\(60pts\) 是 \(O(n^2)\),先看看怎么做.计数题无非容斥和 \(dp\),不妨从 \(dp\) 入手.多项式复杂度的做法意味着无法 ...
- P8865 [NOIP2022] 种花
简要题意 \(T\) 组数据,给你一个 \(n\times m\) 的 \(01\) 矩阵. \(0\) 部分可以组成 \(A_c\) 个 \(\texttt{C}\) 型图案和 \(A_f\) 个 ...
- runtime-第一篇
第一次接触runtime,先介绍下自学的几个runtime方法 1.获取类的属性列表 先导入runtime文件 #import <objc/runtime.h> 我这边创建了一个Per ...
- ZROI3
题解 ZROI3 T1 与<滑动窗口>类似,用单调队列维护 #include <queue> #include <cstdio> #include <cstr ...
- 關於ctype.h頭文件的一些函數
- 图文并茂使用VUE+Quasar CLI开发和构建PWA，registerServiceWorker介绍
看文档 文档地址:Preparation for PWA 1.将PWA模式添加到我们的Quasar项目中: npx quasar mode add pwa 我们看一下有哪些变化 向Quasar项目添加 ...
- vue构建打包兼容操作（vue代码规范建议）-转载Vuejs项目不改动一行代码同时支持用Rollup，vue-cli，parcel构建的一些建议
- 关于VBA中，activesheet用法的一些思考
前二天,给财务部做了个数据采集的工具,因为财务现在用的是excel2013 和2017的版本,所以我决定不用python,改用VBA来处理这个工具. 在 写过程的时候,我用了sheets(i)来定位表 ...
- 读Java8函数式编程笔记07_设计和架构的原则
1. SOLID原则 1.1. 开发良好面向对象程序的准则 1.2. Liskov substitution里氏替换 1.3. Interface segregation接口隔离 1.4. Singl ...
- 转载：SQL分页查询总结
[转载]SQL分页查询总结 开发过程中经常遇到分页的需求,今天在此总结一下吧. 简单说来方法有两种,一种在源上控制,一种在端上控制.源上控制把分页逻辑放在SQL层:端上控制一次性获取所有数据,把 ...