переход состояния vue с данными массива - PullRequest
Новая
       20

переход состояния vue с данными массива

0 голосов
/ 08 декабря 2018

Я хочу построить переход состояния на основе «Анимации состояния с наблюдателями» в документации 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>

Я прокомментировал вычисленную и наблюдаемую логику для примитивных значений в моем примере.Как наблюдать и анимировать ширину каждого бара в массиве баров?

Я очень ценю вашу помощь и объяснение этой проблемы.Спасибо!

1 Ответ

0 голосов
/ 13 декабря 2018

Я не нашел решения для итерации массива с помощью метода tweenLite, но я заставил его работать.

Я создал компонент для элемента bar и передаю ширину одного объекта и включенную ширину.

Возможно, кто-то с такой же проблемой найдет это решение полезным.

...