vue状态过度如何进行监听-前端-云技术

文章页正文上

这篇“vue状态过度如何进行监听”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“vue状态过度如何进行监听”文章吧。 vue状态过度使用侦听器“watch”进行监听，通过侦听器能监听到任何数值property的数值更新。Vue侦听器是提供给开发者可以用来监测某些数据的变化，从而针对这些数据的变化进行某些操作。需要注意侦听器本质上是一个函数，如果要监听哪一个数据的变化，就把那个数据作为函数名。状态就是数据，它包含了数值、颜色值、属性值等等，所以状态过渡指的就是数据本身的过渡动效。Vue 推荐通过 “数据驱动，响应式更新” 的方式来实现状态过渡。其主要思路就是将一个状态转换为一个响应式变量，然后利用一些动态库去更新这个响应式变量，从而驱动 Vue 的响应式更新，实现过渡的动态效果。Vue 的过渡系统提供了非常多简单的方法设置进入、离开和列表的动效。那么对于数据元素本身的动效呢，比如：数字和运算颜色的显示SVG 节点的位置元素的大小和其他的 property这些数据要么本身就以数值形式存储，要么可以转换为数值。有了这些数值后，我们就可以结合 Vue 的响应式和组件系统，使用第三方库来实现切换元素的过渡状态。通过侦听器我们能监听到任何数值 property 的数值更新。Vue侦听器是提供给开发者可以用来监测某些数据的变化，从而针对这些数据的变化进行某些操作。但是要注意：侦听器本质上是一个函数，如果要监听哪一个数据的变化，就把那个数据作为函数名可能听起来很抽象，所以让我们先来看看使用 GreenSock 一个例子：




{{animatedNumber}}

{{animatedNumber}}当你把数值更新时，就会触发动画。这个是一个不错的演示，但是对于不能直接像数字一样存储的值，比如 CSS 中的 color 的值，通过下面的例子我们来通过 Tween.js 和 Color.js 实现一个例子：







Preview:

{{tweenedCSSColor}}

Preview:{{tweenedCSSColor}}就像 Vue 的过渡组件一样，数据背后状态过渡会实时更新，这对于原型设计十分有用。当你修改一些变量，即使是一个简单的 SVG 多边形也可实现很多难以想象的效果。


html>


DynamicStateTransitions







Sides:{{sides}}

MinimumRadius:{{minRadius}}%

UpdateInterval:{{updateInterval}}milliseconds

管理太多的状态过渡会很快的增加 Vue 实例或者组件的复杂性，幸好很多的动画可以提取到专用的子组件。我们来将之前的示例改写一下：





+
=
{{result}}

+
=

+
=

我们能在组件中结合使用这一节讲到各种过渡策略和 Vue 内建的过渡系统。总之，对于完成各种过渡动效几乎没有阻碍。只要一个动画，就可以带来生命。不幸的是，当设计师创建图标、logo 和吉祥物的时候，他们交付的通常都是图片或静态的 SVG。所以，虽然 GitHub 的章鱼猫、Twitter 的小鸟以及其它许多 logo 类似于生灵，它们看上去实际上并不是活着的。Vue 可以帮到你。因为 SVG 的本质是数据，我们只需要这些动物兴奋、思考或警戒的样例。然后 Vue 就可以辅助完成这几种状态之间的过渡动画，来制作你的欢迎页面、加载指示、以及更加带有情感的提示。Sarah Drasner 展示了下面这个 demo，这个 demo 结合了时间和交互相关的状态改变：HTML代码



Moveyourmouseortap

MoveyourmouseortapCSS代码


body{
width:100vw;
height:100vh;
overflow:hidden;
font-family:'Montserrat',sans-serif;
background:#23a9e0;
cursor:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/cockroach%20(2).ico'),default;
-webkit-overflow-scrolling:touch;
}

#app{
-webkit-tap-highlight-color:transparent;
}

svg{
width:100vw;
height:100vh;
max-height:400px;
margin-left:20vw;
}

p{
font-size:16px;
color:white;
text-align:center;
}

.isFlipped{
transform:scaleX(-1);
transform-origin:50%50%;
}

#leftarm{
transform-origin:100%0;
}

@mediascreenand(max-width:600px){
svg{
max-height:200px!important;
margin-left:0!important;
}
}

JavaScript代码


newVue({
el:'#app',
data(){
return{
startX:0,
x:0,
y:0,
flip:false,
audioPlay:false,
startArms:0
}
},
methods:{
armsTL(){
lettl=newTimelineMax();
tl.add('startarms')
tl.to('#backhand',2,{
x:-16,
rotation:150,
transformOrigin:'50%50%'
},'startarms');
tl.to('#rightarm',2,{
rotation:30,
transformOrigin:'100%0'
},'startarms');
tl.to('#newrightarm',2,{
x:-94,
y:-918,
rotation:10,
transformOrigin:'100%100%'
},'startarms');

tl.to('#hand',2,{
x:-15,
y:-7,
rotation:90,
transformOrigin:'50%50%'
},'startarms');
tl.to('#leftarm',2,{
rotation:20,
transformOrigin:'100%0'
},'startarms');
tl.to('#newleftarm',2,{
x:-100,
y:-924,
transformOrigin:'100%100%'
},'startarms');

returntl;
},
coordinates(e){
constaudio=newAudio('https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/Whoa.mp3'),
walleBox=document.getElementById('walle').getBoundingClientRect(),
walleCoords=walleBox.width/2+walleBox.left;

if(this.startArms==0){
this.startArms=this.armsTL();
}

this.y=e.clientY/80-2;
if(e.clientX>walleCoords){
this.x=-(e.clientX/200);
this.flip=true;
if(this.audioPlay===false){
audio.play();
this.audioPlay=true;
}
}else{
this.audioPlay=false;
this.x=e.clientX/200-5;
this.flip=false;

TweenMax.set("#righteyeb2",{
scaleX:1+(1-e.clientX/walleCoords)/5
});
TweenMax.set("#lefteyeb2",{
scaleX:1+(1-e.clientX/walleCoords)/5
});
TweenMax.set("#walle",{
x:((e.clientX/walleCoords)*50)-40
});

this.startArms.progress(1-(e.clientX/walleCoords)).pause();

}
},
},
mounted(){
lettl=newTimelineMax({
repeat:-1,
repeatDelay:2
});

tl.add('redo')
tl.to('#lefteye',0.5,{
rotation:5,
repeat:3,
yoyo:true,
transformOrigin:'100%50%',
ease:Sine.easeOut
},'redo');
tl.to('#righteye',0.5,{
rotation:-5,
repeat:3,
yoyo:true,
transformOrigin:'0%30%',
ease:Sine.easeOut
},'redo+=0');
tl.fromTo('#lefteyeball',0.05,{
scaleY:1
},{
scaleY:0,
repeat:3,
yoyo:true,
transformOrigin:'50%50%',
ease:Circ.easeOut
},'redo+=4');
tl.fromTo('#righteyeball',0.05,{
scaleY:1
},{
scaleY:0,
repeat:3,
yoyo:true,
transformOrigin:'50%50%',
ease:Circ.easeOut
},'redo+=4');
tl.to('#eyecontain',0.4,{
rotation:-15,
repeat:1,
yoyo:true,
transformOrigin:'50%50%',
ease:Sine.easeInOut
},'redo+=2');
}
});

TweenMax.to('p',0.5,{
opacity:0,
delay:2,
ease:Sine.easeIn
});

以上就是关于“vue状态过度如何进行监听”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注云技术行业资讯频道。

相关推荐: 怎么使用CSS设置图片背景透明

这篇文章主要介绍了怎么使用CSS设置图片背景透明的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇怎么使用CSS设置图片背景透明文章都会有所收免费云主机、域名获，下面我们一起来看看吧。首先，设置图片的背景透明需要使用CSS属性opa…

文章页内容下

vue状态过度如何进行监听

相关推荐

推荐AD:

云服务器免费，网站空间免费，等你哦

置顶推荐

热门专题

热门标签

活跃读者

网站统计

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等，SSL部署；安全高速企业专供99.999%稳定，另有高防主机、不限制内容等类型，具体可咨询QQ:360163164,Tel同微信：18905205712

切换注册登录

切换登录注册