Solution 1 :

Well you can use Vue refs (docs) to get the element instead of document.getElementsByClassName since that’s the Vue way of interacting with the DOM.

Or you could simply add the style in the template at render time. I assume “contributions” is an object that includes scale properties, so something along these lines in the v-for should get what you want.

<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" />

Note the transform property needs to be a string to work.

Problem :

I have a for loop that makes a couple of elements that carry a dataset that’s called scale. This is the scale an element should scale to when the component is mounted. In the mounted, I search for the element and then I want to change it’s transform to transform: ScaleY(here comes the data) . I have a class applied which has a transition. So I would like to change it’s transform value so that it will translate automatically. I tried changing the style but no transition happens, it just gets set to the new transform.

My div that gets looped which renders the correct html

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

The css for the layer

.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; 
}

And the Javascript I currently have

  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
    }
  }

Comments

Comment posted by OneDayFly

But that just sets the style which overrides the transform in the class so no transition happens

Comment posted by Bryce Howitson

Putting the scale into the template vs using the

By

Leave a Reply

Your email address will not be published. Required fields are marked *