0

Есть два небольших вопроса. Почему при завершении анимации состояние текста возвращается в исходное. И как сделать так чтобы анимация выполнялась только при клике на заголовок. Сейчас При запуске кода она выполняется сразу на активный элемент

var section = $('.element');

function toggleAccordion() {
  section.removeClass('active');
  $(this).addClass('active');
}

section.on('click', toggleAccordion);
.container {
  margin-top: 150px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.element{

  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
h1{
white-space: nowrap;
transform: rotate(-90deg);
}
.element p {
visibility: hidden;
}
.active{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.active p{
animation: open .5s;
}
.active h1 {
  animation: newanim-in .5s;
}


@keyframes newanim-in{
  0%{
      transform: rotate(-90deg);
  }

  100%{
      transform: rotate(0);
  }
}
@keyframes open {
  0% {
    display: block;
    opacity: 0;
    visibility: hidden;
  }
  100% {
    display: block;
    opacity: 1;
    visibility: visible;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="element active">
    <h1 class="element-title">Lorem</h1>
    <p>Lorem ipsum dolor sit amet</p>
  </div>
  <div class="element">
    <h1 class="element-title">ipsum</h1>
    <p>Lorem ipsum dolor sit amet</p>
  </div>
  <div class="element">
    <h1 class="element-title">dolor</h1>
    <p>Lorem ipsum dolor sit amet</p>
  </div>
</div>

3
  • 1
    наверно так надо : animation: newanim-in .5s forwards; 22 фев 2021 в 13:13
  • @MaximLensky а чтобы она работала только по клику? а не сразу при загрузке
    – zxcqwe
    22 фев 2021 в 13:19
  • я jQuery не знаю ..но по клику ..примерно так ...element.onclick = function element.classList.add("newClass") в этом newClass в css написать всю анимацию 22 фев 2021 в 13:23

1 ответ 1

2

Ну вот же, всё работает:

var section = $('.element');

function toggleAccordion() {
  section.removeClass('active');
  section.removeClass('active_one');
  $(this).addClass('active');
}
section.on('click', toggleAccordion);
.container {
  width: 100%;
  height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: space-between;
}

.element {
  cursor: pointer;
  width: 33%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex: 1 1 auto;
}

h1 {
  white-space: nowrap;
  transform: rotate(-90deg);
}

.element p {
  visibility: hidden;
}

.active,
.active_one {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.active p {
  animation: open .5s forwards;
}

.active h1 {
  animation: newanim-in .5s forwards;
}

@keyframes newanim-in {
  0% {
    transform: rotate(-90deg);
  }
  100% {
    transform: rotate(0);
  }
}

@keyframes open {
  0% {
    display: block;
    opacity: 0;
    visibility: hidden;
  }
  100% {
    display: block;
    opacity: 1;
    visibility: visible;
  }
}

.active_one h1 {
  transform: rotate(0);
}

.active_one p {
  display: block;
  opacity: 1;
  visibility: visible;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="element active_one">
    <h1 class="element-title">Lorem</h1>
    <p>Lorem ipsum dolor sit amet</p>
  </div>
  <div class="element">
    <h1 class="element-title">ipsum</h1>
    <p>Lorem ipsum dolor sit amet</p>
  </div>
  <div class="element">
    <h1 class="element-title">dolor</h1>
    <p>Lorem ipsum dolor sit amet</p>
  </div>
</div>

1
  • так я хотел чтобы 1 сразу был активный (т.е. открыт как после анимации). А если я ему сразу присвою класс active то срабатывает анимация
    – zxcqwe
    23 фев 2021 в 5:10

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.