美文网首页
vue状态过渡

vue状态过渡

作者: 一点金光 | 来源:发表于2019-08-22 13:03 被阅读0次

过渡动效

状态过渡

概念

对于数据元素本身的动效。

实现

通过侦听器可以监听到任何数值属性的数值更新。使用第三方库来实现切换。

示例

<!--内容-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<div id="animated-number-demo">
  <input v-model.number="number" type="number" step="20">
  <p>{{ animatedNumber }}</p>
</div>
//脚本
new Vue({
  el: '#animated-number-demo',
  data: {
    number: 0,
    tweenedNumber: 0
  },
  computed: {
    animatedNumber: function() {
      return this.tweenedNumber.toFixed(0);
    }
  },
  watch: {
    number: function(newValue) {
      TweenLite.to(this.$data, 0.5, { tweenedNumber: newValue });
    }
  }
})

对于不能直接像数字一样存储的值——颜色

<script src="https://cdn.jsdelivr.net/npm/tween.js@16.3.4"></script>
<script src="https://cdn.jsdelivr.net/npm/color-js@1.0.3"></script>

<div id="example-7">
  <input
    v-model="colorQuery"
    v-on:keyup.enter="updateColor"
    placeholder="Enter a color"
  >
  <button v-on:click="updateColor">Update</button>
  <p>Preview:</p>
  <span
    v-bind:style="{ backgroundColor: tweenedCSSColor }"
    class="example-7-color-preview"
  ></span>
  <p>{{ tweenedCSSColor }}</p>
</div>
//脚本
var Color = net.brehaut.Color
new Vue({
  el: '#example-7',
  data: {
    colorQuery: '',
    color: {
      red: 0,
      green: 0,
      blue: 0,
      alpha: 1
    },
    tweenedColor: {}
  },
  created: function () {
    this.tweenedColor = Object.assign({}, this.color)
  },
  watch: {
    color: function () {
      function animate () {
        if (TWEEN.update()) {
          requestAnimationFrame(animate)
        }
      }

      new TWEEN.Tween(this.tweenedColor)
        .to(this.color, 750)
        .start()

      animate()
    }
  },
  computed: {
    tweenedCSSColor: function () {
      return new Color({
        red: this.tweenedColor.red,
        green: this.tweenedColor.green,
        blue: this.tweenedColor.blue,
        alpha: this.tweenedColor.alpha
      }).toCSS()
    }
  },
  methods: {
    updateColor: function () {
      this.color = new Color(this.colorQuery).toRGB()
      this.colorQuery = ''
    }
  }
})

//样式
.example-7-color-preview {
  display: inline-block;
  width: 50px;
  height: 50px;
}

动态状态过渡

提取——把过渡放到组件里

问题

管理太多的状态过渡会很快的增加 Vue 实例或者组件的复杂性

解决

提取到专用的子组件.

实现

//注册组件
// 这种复杂的补间动画逻辑可以被复用
// 任何整数都可以执行动画
// 组件化使我们的界面十分清晰
// 可以支持更多更复杂的动态过渡
// 策略。
Vue.component('animated-integer', {
  template: '<span>{{ tweeningValue }}</span>',
  props: {
    value: {
      type: Number,
      required: true
    }
  },
  data: function () {
    return {
      tweeningValue: 0
    }
  },
  watch: {
    value: function (newValue, oldValue) {
      this.tween(oldValue, newValue)
    }
  },
  mounted: function () {
    this.tween(0, this.value)
  },
  methods: {
    tween: function (startValue, endValue) {
      var vm = this
      function animate () {
        if (TWEEN.update()) {
          requestAnimationFrame(animate)
        }
      }

      new TWEEN.Tween({ tweeningValue: startValue })
        .to({ tweeningValue: endValue }, 500)
        .onUpdate(function (object) {
          vm.tweeningValue = object.tweeningValue.toFixed(0)
        })
        .start()

      animate()
    }
  }
})
<!--使用组件-->
<!--内容-->
<script src="https://cdn.jsdelivr.net/npm/tween.js@16.3.4"></script>

<div id="example-8">
  <input v-model.number="firstNumber" type="number" step="20"> +
  <input v-model.number="secondNumber" type="number" step="20"> =
  {{ result }}
  <p>
    <animated-integer v-bind:value="firstNumber"></animated-integer> +
    <animated-integer v-bind:value="secondNumber"></animated-integer> =
    <animated-integer v-bind:value="result"></animated-integer>
  </p>
</div>
//脚本
// 所有的复杂度都已经从 Vue 的主实例中移除!
new Vue({
  el: '#example-8',
  data: {
    firstNumber: 20,
    secondNumber: 40
  },
  computed: {
    result: function () {
      return this.firstNumber + this.secondNumber
    }
  }
})

相关文章

  • vue状态过渡

    过渡动效 状态过渡 概念 实现 通过侦听器可以监听到任何数值属性的数值更新。使用第三方库来实现切换。 示例 对于不...

  • vue状态过渡

    https://cn.vuejs.org/v2/guide/transitioning-state.html//T...

  • Vue学习笔记进阶篇——过渡状态

    本文为转载,原文:Vue学习笔记进阶篇——过渡状态Vue 的过渡系统提供了非常多简单的方法设置进入、离开和列表的动...

  • Vue中的状态过渡

    状态过渡其实就是纯数据元素的过渡,可以结合Vue提供的东西,如监听器、响应性和组件系统等,制作出各种有意思的东西 ...

  • vue设置name导航动画过渡

    在vue的css文件写入,.名字-enter{}//定义进入过渡的开始状态.名字-enter-active{}//...

  • Vue中多个元素或组件的过渡

    Vue中多个元素的过渡 Vue中多个组件的过渡(通过动态组件实现组件的过渡动画效果)image.png

  • Vue学习笔记进阶篇——列表过渡及其他

    本文为转载,原文:Vue学习笔记进阶篇——列表过渡及其他本文将介绍Vue中的列表过渡,动态过渡, 以及可复用过渡是...

  • 过渡&&动画总结

    一. vue的过渡与动画 Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。过渡效果的应用...

  • Vue-(6)过渡 & 动画

    过渡 Vue在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。Vue 提供了内置的过渡封装组件,该...

  • 2021-01-08

    Vue过渡和动画 Vue过渡和动画官方文档[https://cn.vuejs.org/v2/guide/trans...

网友评论

      本文标题:vue状态过渡

      本文链接:https://www.haomeiwen.com/subject/vvhneftx.html