如何动态设置元素的比例，以便在安装组件后过渡到新的变换？

Question

我有一个for循环，它使几个元素包含一个称为scale的数据集。这是安装组件时元素应缩放的比例。在已安装的设备中，我搜索元素，然后将其转换为transform: ScaleY(here comes the data)。我有一个带有过渡的类。因此，我想更改它的变换值，以便它将自动翻译。我尝试更改样式，但没有发生过渡，只是将其设置为新的变换。

我循环播放的div呈现正确的html

<div v-for="(contribution, index) in contributions" :key="index" :value="contribution" :data-scale="contribution.scale" class="contribution-layer" />

图层的css

.contribution-layer{
  position: absolute;
  transition: 5s;
  bottom: 0;
  background-color: $secondary-color;
  transform-origin: 50% 100%;
  transform: scaleY(0);
  height: 100%;
  width: 100%;
  will-change: transform; 
}

和我目前拥有的Javascript

  mounted(){
    if(!process.client)
      return;
    let contributionLayers = document.getElementsByClassName('contribution-layer');
    for(let i = 0; i < contributionLayers.length; i++)
    {
      let scaleY = contributionLayers[i].dataset.scale;
      //contributionLayers[i].style.transform = "scaleY(scaleY);"; or something like that
      console.log(scaleY); //outputs the correct scale
    }
  }

Answer 1

好吧，您可以使用Vue refs（docs）而不是document.getElementsByClassName来获取元素，因为这是Vue与DOM交互的方式。

或者您可以在渲染时将样式添加到模板中。我认为“贡献”是一个包含比例尺属性的对象，因此v-for中沿这些方向的东西应该可以得到想要的。

<div v-for="(contribution, index) in contributions" 
:key="index" 
:value="contribution" 
:data-scale="contribution.scale"
v-bind:style="{ transform: 'scale('+ contribution.scale + ')' }" 
class="contribution-layer" />

注意，transform属性必须是字符串才能使用。