Как реализовать анимацию css через JS

170

10 декабря 2021, 19:10

Необходимо, что бы при клике на ссылку вырисовывалась линия, попытался менять ширину линии с помощью JS, предварительно установив элементу transition,но не помогло, она просто моментально появляется, при том, что если поменять ширину вручную, то анимация срабатывает.

 function a1(){
    line1 = document.getElementById("line1");
    line2 = document.getElementById("line2");
    line3 = document.getElementById("line3");
    line4 = document.getElementById("line4");
    line5 = document.getElementById("line5");
    line1.style.display = "block";
    line1.style.width = "2.5%";
    line2.style.display = "none";
    line2.style.width = "0";
    line3.style.display = "none";
    line3.style.width = "0";
    line4.style.display = "none";
    line4.style.width = "0";
    line5.style.display = "none";
    line5.style.width = "0";
}

css

#line1,
#line2,
#line3,
#line4,
#line5{
    content:"";
    position: fixed;
    width: 0;
    border-bottom: 2px solid white;
    top:74px;
    left:73%;
    display: none;
    transition: 1s;
}

Answer 1

let btn = document.getElementById('btn'); 
let line = document.getElementById('line'); 
 
btn.addEventListener("click", function(){ 
  line.classList.add("lineFull"); 
});

.line{ 
    background: black; 
    height: 5px; 
    width: 5px; 
    transition: all .4s; 
  } 
   
  .lineFull{ 
    width:300px; 
    transition: all .4s; 
  } 
   
  button{ 
  margin-top:10px; 
  }

<div id="line" class="line"></div> 
<button id="btn">Click</button>

Не совсем понятно что вы хотите сделать, если я правильно понял вот пример!

Answer 2

не помогло, она просто моментально появляется

Вероятно, это потому что ты меняешь свойство display. Попробуй переключать не его, а visibility или opacity.

И желательно переключать класс активного состояния линии (используя метод classList.toggle), вместо такого насилия над атрибутом style каждого элемента.
То есть, добавив всем линиям класс, например line, в CSS:
.line.active { visibility: visible; width: 2.5%; }
, и скриптом убирать/добавлять этот класс на элементах, например так:

function setActiveLine(idx) {
  [...document.querySelectorAll('.line')].forEach(
    (line, i) => line.classList.toggle('active', i === idx)
  ); 
}

Еще вариант - использование экспериментального Web Animations API:

const lines = document.querySelectorAll('.line');  
let i = 0; 
animateLine(i);  
setInterval(() => animateLine(i = (++i > 3) ? 0 : i), 1e3);  
 
function animateLine(idx) { 
  console.clear(), console.log('Анимируем "линию" с индексом ' + idx);  
  lines[idx].animate([ 
    { width: '0', background: '#aaa' },  
    { width: '50%', background: `hsl(${idx * 100}, 100%, 50%)` } 
  ], { duration: 1e3, easing: 'ease-in' });  
}

.line { width: 0; height: 8px; }

<div class="line"></div> 
<div class="line"></div> 
<div class="line"></div> 
<div class="line"></div>

Для процессора это немного тяжелее чем CSS-анимации и переходы (transitions), но использование данного API может быть удобно в некоторых случаях.

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как получить значения семплов в audioWorklet?

У меня есть буфер входящих аудио фреймов в wasm модуль

175

javascript

Использование WebSokets [закрыт]

Хотите улучшить этот вопрос? Переформулируйте вопрос так, чтобы он был сосредоточен только на одной проблеме

147

javascript

возможно ли исправить день. недели?

Есть несколько дат, часть из которых по григорианскому календарю, а часть по юлианскому, дело в том что в датах по юлианскому календарю дни...

HTML

Проблема с атрибутами data-

Есть сайт на WP с модальными окнами, и выводятся они таким образом:

147