Как исчезать в div, используя только CSS и JavaScript при нажатии на другой div

ProgramBox

Как исчезать в div, используя только CSS и JavaScript при нажатии на другой div

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

#javascript #html #css

#javascript #HTML #css

Вопрос:

У меня есть проект, над которым я работаю, где в одном div (div1) есть прослушиватель событий «click». При нажатии на него div1 сдвигается вправо с помощью анимации @keyframes. Однако я также хочу, чтобы другой div (div2) исчезал во время скольжения div1. Для этого я использую другую анимацию @keyframes.

Вот HTML-код:

 <div class="div1"> 
      <h3> Important </h3>
</div>
<div class="div2">
      <p>
         This is the text that I would like to have
         faded in when div1 is clicked on
      </p>
</div>

Существует несколько div1 и несколько div2, но для простоты я включил только один их набор. Дайте мне знать, если вы хотите увидеть больше кода.

Вот код CSS:

 .div1 {
   /* Style */
   display: flex;
   position: relative;
   flex-direction: column;

   /* Dimensions */
   width: 17vw;
   height: 17vw;
   min-width: 160px;
   min-height: 160px;
   max-width: 190px;
   max-height: 190px;

   /* Animation */
   animation-name: slide;
   animation-duration: .8s;
   animation-fill-mode: forwards;
   animation-timing-function: ease-out;
   animation-play-state: paused;
}

@keyframes slide {
  from {
      left: 0;
  }
  to {
      left: 75vw;
  }
}

.div2 {
   position: relative;
   max-width: 70vw;
   display: none;
   animation-name: fade;
   animation-duration: .8s;
   animation-fill-mode: forwards;
   animation-delay: .5s;
   animation-play-state: pause;
}

@keyframes fade {
   from {
       display: none;
   }
   to {
       display: block;
   }
}

.run-animation {
   animation-play-state: running;
}

Есть больше кода для стилизации и тому подобного. Класс run-animation будет добавлен в оба divs при нажатии на div1.

Вот код JavaScript:

     var div1 = document.getElementsByClassName('div1');

    for (var i = 0; i < div1.length; i  ) {
       div1[i].addEventListener("click", function() {
           this.className = "div1 run-animation"
           
           
           var div2= document.getElementsByClassName('div2');
           /* I am just selecting the first div2 to change just one */
           div2[0].className = "div2 run-animation"
       })
   }

Код обновляет имена классов как для div1, так и для div2. Моя проблема в том, что анимируется только div1, div2 не меняется, он просто остается (display: none;). Как я могу решить эту проблему? Дайте мне знать, если вам нужно, чтобы я уточнил что-нибудь еще. Спасибо.

Фрагмент:

 var div1 = document.getElementsByClassName('div1');

for (var i = 0; i < div1.length; i  ) {
    div1[i].addEventListener("click", function() {
        this.classList.add("div1 run-animation")


        var div2= document.getElementsByClassName('div2');
        /* I am just selecting the first div2 to change just one */
        div2[0].classList.add("div2 run-animation")
    })
}

 .div1 {
    /* Style */
    display: flex;
    position: relative;
    flex-direction: column;

    /* Dimensions */
    width: 17vw;
    height: 17vw;
    min-width: 160px;
    min-height: 160px;
    max-width: 190px;
    max-height: 190px;

    /* Animation */
    animation-name: slide;
    animation-duration: .8s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
    animation-play-state: paused;
}

@keyframes slide {
    from {
        left: 0;
    }
    to {
        left: 75vw;
    }
}

.div2 {
    position: relative;
    max-width: 70vw;
    display: none;
    animation-name: fade;
    animation-duration: .8s;
    animation-fill-mode: forwards;
    animation-delay: .5s;
    animation-play-state: pause;
}

@keyframes fade {
    from {
        display: none;
    }
    to {
        display: block;
    }
}

.run-animation {
    animation-play-state: running;
}

 <div class="div1">
    <h3> Important </h3>
</div>
<div class="div2">
    <p>
        This is the text that I would like to have
        faded in when div1 is clicked on
    </p>
</div>

Ответ №1:

Поэтому я добавил еще один класс и добавил некоторые эффекты в анимацию для div2. Также изменено прямое внедрение класса в classList, код прокомментирован с изменениями.

 var div1 = document.getElementsByClassName('div1');

for (var i = 0; i < div1.length; i  ) {
    div1[i].addEventListener("click", function() {
        this.classList.add("div1", "run-animation");


        var div2= document.getElementsByClassName('div2');
        /* I am just selecting the first div2 to change just one */
        /*i highly recommend using classlist instead of injecting classes directly*/
        div2[0].classList.remove( "hidden");
        div2[0].classList.add("div2", "run-animation");
    })
}

 .div1 {
    /* Style */
    display: flex;
    position: relative;
    flex-direction: column;

    /* Dimensions */
    width: 17vw;
    height: 17vw;
    min-width: 160px;
    min-height: 160px;
    max-width: 190px;
    max-height: 190px;

    /* Animation */
    animation-name: slide;
    animation-duration: .8s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
    animation-play-state: paused;
}

@keyframes slide {
    from {
        left: 0;
    }
    to {
        left: 75vw;
    }
}

.div2 {
    position: relative;
    max-width: 70vw;
    animation-name: fade;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    animation-delay: .2s;
    transition: opacity 0.5s;
    opacity: 0;/*new for fade in*/
}
/*new*/
.hidden {
    display: none;
    animation-play-state: paused;
}

@keyframes fade {
    from {
        display: none;
        /*new for fade-in*/
        opacity: 0;
    }
    to {
        display: block;
        /*new for fade-in*/
        opacity: 1;
    }
}

.run-animation {
    animation-play-state: running;
}

 <div class="div1">
    <h3> Important </h3>
</div>
<div class="div2 hidden">
    <p>
        This is the text that I would like to have
        faded in when div1 is clicked on
    </p>
</div>

Ответ №2:

итак, если у вас есть несколько элементов с классом «div2», это должно сработать

 var div1 = document.getElementsByClassName('div1');
var div2= document.getElementsByClassName('div2');

for (var i = 0; i < div1.length; i  ) {
   div1[i].addEventListener("click", function() {
       this.className = "div1 run-animation"
       
       /* I am just selecting the first div2 to change just one */
       div2[i].className = "div2 run-animation"
   })
}

1. Хорошо, спасибо. Это была еще одна проблема, которую мне нужно было решить.

2. К сожалению, потому что переменная «i» не входит в область действия функции события. Я не могу использовать его в качестве индекса для выбора элемента из списка div2. Однако это еще одна проблема, которую я пытаюсь решить.