анимация на javascript / css

ProgramBox

анимация на javascript / css

Post author:admin
Запись опубликована:9 января, 2022
Post category:Вопросы по программированию

#javascript #html #css

Вопрос:

У меня есть div раздел, который я хочу, чтобы, когда я нажал кнопку, он опускался, а затем поворачивался, так что он опускался, но не поворачивался после перехода на дно. Он просто возвращается на первую позицию по оси Y. как я могу решить эту проблему

 let slider = document.getElementsByClassName('slideshow')[0];

function movingfunc() {
  slider.classList.add('movement')
  setTimeout(nextFunc, 5000)
}

function nextFunc() {
  slider.removeAttribute('class', 'movement');
  slider.classList.add('movementAfter');
}

 * {
  padding: 0;
  margin: 0;
}

body {
  background-image: url('346767.jpg');
  background-size: cover;
  z-index: 0;
}

#colorbody {
  background-color: rgba(235, 107, 107, 0.425);
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.slideshow {
  height: 100px;
  width: 200px;
  background-color: rgb(68, 0, 255);
  margin: 0 auto;
}

.movement {
  transform: translateY(500px);
  transition: 4s;
}

.movementAfter {
  transform: rotate(360deg);
  background-color: red;
  transition: 2s;
  margin: 0 auto;
  height: 100px;
  width: 200px;
}

 <div class="slideshow" class="movement"></div>
<button id="chos" onclick="movingfunc()">click to move</button>

1. class="slideshow" class="movement" должно быть: class="slideshow movement" . Вы не должны использовать несколько атрибутов одного и того же типа.

2. я изменил его, но еще не исправил … можете ли вы прислать мне истинный отредактированный код

Ответ №1:

Вы можете сделать, как показано в приведенном ниже фрагменте, и изменить анимацию в разных процентах ее завершения .

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

С анимацией вы получаете дополнительную функциональность и больше свойств для работы в соответствии с ожиданиями

 let slider = document.getElementsByClassName('slideshow')[0];
let btn = document.getElementById('chos');

btn.addEventListener('click', function() {
  slider.classList.add('animate')
  setTimeout(() => {
    slider.classList.remove('animate')
  }, 5000)
})

 * {
  padding: 0;
  margin: 0;
}

body {
  background-image: url('346767.jpg');
  background-size: cover;
  z-index: 0;
}

#colorbody {
  background-color: rgba(235, 107, 107, 0.425);
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.slideshow {
  height: 100px;
  width: 200px;
  background-color: rgb(68, 0, 255);
  margin: 0 auto;
}

.slideshow.animate {
  animation: spinTrans 5s;
}

@keyframes spinTrans {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(500px) rotate(360deg)
  }
  100% {
    transform: rotate(0deg) translateY(0px);
    background-color: red;
  }
}

 <div class="slideshow"></div>
<button id="chos">click to move</button>

================================================================

Обновление : Так как вам нужно изменить тот же код :

Вы должны удалить вторую функцию, чтобы поле оставалось внизу . Теперь вы можете добавить к нему любую степень поворота .

Это было для предыдущего редактирования : ваш код вращается slideshow , 360deg но так как он будет переведен в то же состояние, поэтому вы не видите никаких изменений .
Если вы измените угол 90deg 180deg 270deg 450deg```` ..... you will see a rotation but you can't see rotation in наклона на 0 градусов 360 градусов 720 градусов« .

Вот рабочий фрагмент с 180deg вращением, вы можете применить любое из вышеперечисленных действий и увидеть изменения

 let slider = document.getElementsByClassName('slideshow')[0];

function movingfunc() {
  slider.classList.add('movement')
}

 * {
  padding: 0;
  margin: 0;
}

body {
  background-image: url('346767.jpg');
  background-size: cover;
  z-index: 0;
}

#colorbody {
  background-color: rgba(235, 107, 107, 0.425);
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.slideshow {
  height: 100px;
  width: 200px;
  background-color: rgb(68, 0, 255);
  margin: 0 auto;
}

.movement {
  transform: translateY(500px) rotate(360deg);
  transition: 4s;
  background-color: red;
}

 <div class="slideshow" class="movement"></div>
<button id="chos" onclick="movingfunc()">click to move</button>

1. есть ли какой-либо другой способ решить проблему с моим кодом и решить ее ? я имею в виду, что я хочу использовать свой код, но я не знаю, в чем проблема @Rana

2. Обновил ответ и также решил ваш код . Но, как уже упоминалось в новом ответе, анимация обеспечит больше функциональности . Так что может быть полезно в будущем кодировании

3. спасибо, что сработало, но есть еще одна проблема, она выходит на первую позицию … мне это не нравится, я хочу, чтобы погружение оставалось на втором месте ( где оно опускается и хочет вращаться )_ но на самом деле оно опускается, а затем поднимается во время вращения

4. Я изменил ответ : вы должны удалить вторую функцию, чтобы поле оставалось внизу . Теперь вы можете добавить к нему любую степень поворота .

Метки: анимация на javascript / css