html - 如何使用内联 css 为宽度设置动画

Question

我正在尝试在页面加载时使用来自 API 的数据为元素的宽度设置动画，我正在使用 Vue js。我所做的是使用内联 css 并应用宽度值(来自 API 数据)。我可以添加元素宽度，但它没有动画。

Vue 模板已编辑:

<li v-for="(stats, index) in teamStats[0]">
    <div class="bar">
        <span :style="'width:'+ stats +'%;'">
            {{stats}}
        </span>
    </div>
</li>

萨斯:

.bar {
    span {
        text-align: $l;
        right: 0;
        width: 0%;
        -webkit-transition: width 1s;
        -moz-transition: width 1s;
        -o-transition: width 1s;
        transition: width 1s;
    }
}

Answer 1

您可能需要使用 JavaScript transition hooks .这是一个例子。

new Vue({
  el: '#app',
  
  data: {
    stats: [],
  },
  
  created() {
    // Simulate loading data from server
    setTimeout(() => {
      this.stats = [0.1, 0.15, 0.32, 0.55, 0.88, 0.96];
    }, 500);
  },
  
  methods: {
    onEnter(el) {
      var stat = +el.dataset.stat;
      var index = +el.dataset.index;
      el.style.transitionDelay = index * 0.05 + 's';
      el.style.width = (stat * 100) + '%';
      el.style.backgroundColor = `hsl(${50 - 50 * stat | 0}, 100%, 50%)`;
    },
  },
});

.bars {
  width: 400px;
}

.bar {
  margin: 5px 0;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: white;
  font-family: sans-serif;
  font-weight: bold;
  padding: 5px;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
}

.bar.v-enter-active {
  transition: all 1s cubic-bezier(0, 1, 0.5, 1);
}

.bar.v-enter {
  /* Needs !important to override inline styles */
  opacity: 0;
  width: 0% !important;
  background-color: hsl(50, 100%, 50%) !important;
}

<script src="https://cdn.rawgit.com/vuejs/vue/dev/dist/vue.min.js"></script>

<div id="app">
  <transition-group tag="div" class="bars" @enter="onEnter">
    <div class="bar" v-for="stat, index of stats" :key="stat" :data-stat="stat" :data-index="index">
      {{ (stat * 100 | 0) }}%
    </div>
  </transition-group>
</div>