Как я могу динамически установить масштаб элемента, чтобы он переходил к новому преобразованию после монтирования компонента? - PullRequest
Новая
       10

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

0 голосов
/ 28 января 2020

У меня есть для l oop, который составляет пару элементов, которые содержат набор данных, который называется масштабом. Это масштаб, к которому должен масштабироваться элемент при установке компонента. В смонтированном виде я ищу элемент, а затем хочу изменить его преобразование на 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
    }
  }

1 Ответ

0 голосов
/ 28 января 2020

Ну, вы можете использовать Vue refs ( документы ), чтобы получить элемент вместо document.getElementsByClassName, поскольку это способ взаимодействия Vue с DOM.

Или вы можете просто добавить стиль в шаблон во время рендеринга. Я предполагаю, что "contrib" - это объект, который имеет свойства масштаба, поэтому что-то в этом направлении в 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 должно быть строкой для работы.

...