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框架 ...
随机推荐
- HBase详解(02) - HBase-2.0.5安装
HBase详解(02) - HBase-2.0.5安装 HBase安装环境准备 Zookeeper安装 Zookeeper安装参考<Zookeeper详解(02) - zookeeper安装部署 ...
- 如何用 30s 给面试官讲清楚什么是 Token？
引言 前文介绍了 Session-Cookie 的认证过程,简单回顾下基本步骤: 客户端(浏览器)向服务器发送用户名和密码 服务器验证通过后,创建 Session 对象,在 Session 中保存该用 ...
- python利用matplotlib生成迷宫
起因 我想要写一个项目叫python迷宫游戏,需求是玩家能和机器对抗率先走出迷宫,至少要有两个等级的电脑. 慢慢来,首先迷宫游戏需要有一个迷宫并展示出来,这便是这篇博客的目的 假设迷宫使用0表示点,1 ...
- vue3实现一个抽奖小项目
前言 在公司年会期间我做了个抽奖小项目,我把它分享出来,有用得着的可以看下. 浏览链接:http://xisite.top/original/luck-draw/index.html 项目链接:htt ...
- sstream中的stringstream怎么用
sstream中的stringstream怎么用 1.cin cin是从缓冲区读入,会把空格.回车等不可见的字符当做是分割,跳过.并且最后读入之后,后面会有剩余的部分,比如空格.回车等. 2.getl ...
- 使用vue创建一个吸顶的菜单项--简单版
1.hover时候出现,总体来说只改了一下两个index.vue,还有route文件 src\layoutTwo\index.vue <template> <div class=&q ...
- Spingboot 程序在linux 上发布
1.Linux 安装JDK(略)参考之前的文章 2.创建springboot 程序 项目文件结构 注意 controller包要与Application 同一级 设置tomcat 端口 运行本机测试 ...
- （原创）【B4A】一步一步入门03：APP名称、图标等信息修改
一.前言 上篇 (原创)[B4A]一步一步入门02:可视化界面设计器.控件的使用 中我们已经了解了B4A程序的基本框架,现在我们还进一步讲解. 本篇文章会讲解如何修改APP的名称.图标等信息,以让一个 ...
- Zstack使用经验系列2-安装的存储配置
从上图读者应该能看出当初分配主存储和镜像存储时空间分配的是多么不合理,镜像空间不需要那么多.不过这时系统已经运行了近1年,很多云主机以及系统服务都搭好了,如果再重新分配空间是多么的麻烦! 所以开始为p ...
- 修改Element - plus的样式
把显示再浏览器上的对应css选择器全部写上,并且添加 !important </script> <style lang='scss' scoped> //修改 element ...