Question

我想基于vue.js文档中的“用观察者创建动画状态”来建立状态转换：https://vuejs.org/v2/guide/transitioning-state.html#Animating-State-with-Watchers

我了解带有原始数据类型的示例。就我而言，需要动画处理的数据编号是存储在数组中的对象中的值。

这是我的问题的简化示例：

new Vue({
  el: '#animated-bar-demo',
  data: {
    bars: [
      {
        width: 30,
      },
      {
        width: 10,
      },
      {
        width: 70,
      },
    ]
  },
  // HOW TO WATCH AND ANIMATE BARS.WIDTH FOR EACH BAR?
  
  /* computed: {
    animatedNumber: function() {
      return this.tweenedNumber.toFixed(0);
    }
  },
  watch: {
    number: function(newValue) {
      TweenLite.to(this.$data, 0.5, { tweenedNumber: newValue });
    }
  }, */
  methods: {
    changeData() {
      let bars = this.bars;
      bars.forEach(bar => {
        bar.width += 10;
      });
      this.bars = bars;
    },
  },
})

body {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
}

button {
  margin-bottom: 24px;
}

.bar-container {
	width: 400px;
	height: 32px;
	border: 3px solid black;
	overflow: hidden;
  margin-bottom: 32px;
}

.bar {
  width: 120%;
  height: 100%;
  background-color: #FA7268;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>

<div id="animated-bar-demo">
  <button v-on:click="changeData()"> add data </button>
	<div class="bar-container" v-for="bar in bars">
		<div class="bar"
			:style="{ 'width': bar.width + '%'}">	
		</div>
	</div>
</div>

在示例中，我已经注释了原始值的计算逻辑和监视逻辑。如何观看和动画bars数组中每个bar的宽度？

非常感谢您对这个问题的帮助和解释。谢谢！

Answer 1

我没有找到通过tweenLite方法迭代数组的解决方案，但是我可以使用它。

我为bar元素创建了一个组件，并传递了单个对象宽度（包括其中的宽度）。

也许有相同问题的人发现此解决方案很有帮助。

数组数据的vue状态转换

1 个答案: