绵阳梓潼网站制作公司

vue状态过度如何进行监听

这篇“vue状态过度如何进行监听”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“vue状态过度如何进行监听”文章吧。

创新互联从2013年成立，先为温泉等服务建站，温泉等地企业，进行企业商务咨询服务。为温泉企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

vue状态过度使用侦听器“watch”进行监听，通过侦听器能监听到任何数值property的数值更新。Vue侦听器是提供给开发者可以用来监测某些数据的变化，从而针对这些数据的变化进行某些操作。需要注意侦听器本质上是一个函数，如果要监听哪一个数据的变化，就把那个数据作为函数名。

状态过渡

状态就是数据，它包含了数值、颜色值、属性值等等，所以状态过渡指的就是数据本身的过渡动效。

Vue 推荐通过 “数据驱动，响应式更新” 的方式来实现状态过渡。其主要思路就是将一个状态转换为一个响应式变量，然后利用一些动态库去更新这个响应式变量，从而驱动 Vue 的响应式更新，实现过渡的动态效果。

Vue 的过渡系统提供了非常多简单的方法设置进入、离开和列表的动效。那么对于数据元素本身的动效呢，比如：

  • 数字和运算

  • 颜色的显示

  • SVG 节点的位置

  • 元素的大小和其他的 property

这些数据要么本身就以数值形式存储，要么可以转换为数值。有了这些数值后，我们就可以结合 Vue 的响应式和组件系统，使用第三方库来实现切换元素的过渡状态。

1.状态动画与侦听器

通过侦听器我们能监听到任何数值 property 的数值更新。

Vue侦听器是提供给开发者可以用来监测某些数据的变化，从而针对这些数据的变化进行某些操作。

但是要注意：侦听器本质上是一个函数，如果要监听哪一个数据的变化，就把那个数据作为函数名

可能听起来很抽象，所以让我们先来看看使用 GreenSock 一个例子：




  
  
{{ animatedNumber }}

vue状态过度如何进行监听

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

vue状态过度如何进行监听



 

  
  Update
  
Preview:

  
  
{{ tweenedCSSColor }}

2.动态状态过渡

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

vue状态过度如何进行监听



  
    Dynamic State Transitions
    
    
    
  
  
    
      
        
        
      
      
      
      
      
      
      
    
         

3.把过渡放到组件里

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

vue状态过度如何进行监听


 

   +
   =
  {{ result }}
  

     +
     =
    
  

我们能在组件中结合使用这一节讲到各种过渡策略和 Vue 内建的过渡系统。总之，对于完成各种过渡动效几乎没有阻碍。

4.赋予设计生命

只要一个动画，就可以带来生命。不幸的是，当设计师创建图标、logo 和吉祥物的时候，他们交付的通常都是图片或静态的 SVG。所以，虽然 GitHub 的章鱼猫、Twitter 的小鸟以及其它许多 logo 类似于生灵，它们看上去实际上并不是活着的。

Vue 可以帮到你。因为 SVG 的本质是数据，我们只需要这些动物兴奋、思考或警戒的样例。然后 Vue 就可以辅助完成这几种状态之间的过渡动画，来制作你的欢迎页面、加载指示、以及更加带有情感的提示。

Sarah Drasner 展示了下面这个 demo，这个 demo 结合了时间和交互相关的状态改变：

vue状态过度如何进行监听

HTML代码


  
Move your mouse or tap

  
  
    
      
    
    
      
    
    
      
    
    
      
    
    
      
    
  
  
    
  
  
    
    
      
        
        
        
      
      
        
        
        
        
      
    
    
    
      
        
        
        
          
          
            
          
          
        
      
      
        
          
        
      
      
        
        
        
          
          
            
          
          
        
      
    
    
    
    
    
      
      
      
    
    
    
      
      
       
         
      
      
      
        
        
        
        
        
        
      
    
    
      
      
      
      
      
      
      
      
      
      
      
      
    
    
      
      
      
      
      
    
    
      
      
      
      
      
      
      
      
        
        
        
        
      
      
        
        
        
        
      
      
        
        
        
        
      
      
        
        
        
        
      
    
    
      
        
        
        
        
        
      
      
        
      
      
        
        
        
      
    
    
  

CSS代码

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;
}

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

JavaScript代码

new Vue({
  el: '#app',
  data() {
    return {
      startX: 0,
      x: 0,
      y: 0,
      flip: false,
      audioPlay: false,
      startArms: 0
    }
  },
  methods: {
    armsTL() {
      let tl = new TimelineMax();
      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');

      return tl;
    },
    coordinates(e) {
      const audio = new Audio('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() {
    let tl = new TimelineMax({
      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状态过度如何进行监听”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注创新互联行业资讯频道。


本文标题：vue状态过度如何进行监听
网页网址：http://myzitong.com/article/jijejo.html

其他资讯