CSS: изменить цвет div во время анимации другого - PullRequest
Новая
       27

CSS: изменить цвет div во время анимации другого

0 голосов
/ 29 апреля 2020

Я хочу изменить цвет элемента div, пока другой элемент div проходит свою анимацию. Я уже получил готовый файл html: 

   .body {
      width: 1200px;
      background-color: white;
      font-family: sans-serif;
      font-size: 20px;
      margin: 50px;
    }

    .bar {
      stroke: black;
      stroke-width: 0.1;
      background-color: cornflowerblue;
      width: 500px;
      height: 25px;
      left: 100px;
      top: 100px;
      position: absolute;
      animation-name: expandBar;
      animation-duration: 2s;
      animation-delay: 1s;
      animation-fill-mode: both;
      transition-timing-function: ease-in-out;
    }
    @keyframes expandBar {
      from {
          width: 0px;
      }
      to {
          width: width;
      }
    }

    .box {
      stroke: black;
      stroke-width: 0.1;
      background-color: cornflowerblue;
      width: 100px;
      height: 100px;
      left: 100px;
      top: 135px;
      position: absolute;
    }
    <html lang="de">
      <head>
        <meta charset="utf-8" />
        <title>Title</title>
        <link rel="stylesheet" href="bc.css" />
      </head>

      <body>
        <div class="bar"></div>
        <div class="box"></div>
      </body>
    </html>

Для начала я попытался использовать следующий код, чтобы проверить, как это работает (я видел это на inte rnet). Работает нормально. 

.bar:hover ~ .box{
  background-color: red;
}

Однако сейчас я не знаю, как справиться с анимацией элемента bar. Я хочу, чтобы поле было красным в течение 2 секунд, когда бар расширяется.

Есть ли что-то вроде ключевого слова вместо hover, которое я мог бы использовать для этого? Или есть другой способ сделать это?

Ответы [ 3 ]

2 голосов
/ 29 апреля 2020

Я не могу напрямую думать о решении, используя только CSS. Но немного javascript может помочь. Есть onanimationstart и onanimationend, которые могут вам помочь. Ссылка на MDN do c

Ниже рабочий пример. 

let bar = document.getElementById("bar")
let box = document.getElementById("box")

bar.onanimationstart = function(event){
  box.classList.add("red")
}

bar.onanimationend = function(event){
  box.classList.remove("red")
}
#body {
  width: 1200px;
  background-color: white;
  font-family: sans-serif;
  font-size: 20px;
  margin: 50px;
}

#bar {
  stroke: black;
  stroke-width: 0.1;
  background-color: cornflowerblue;
  width: 500px;
  height: 25px;
  left: 100px;
  top: 100px;
  position: absolute;
  animation-name: expandBar;
  animation-duration: 2s;
  animation-delay: 1s;
  animation-fill-mode: both;
  transition-timing-function: ease-in-out;
}
@keyframes expandBar {
  from {
      width: 0px;
  }
  to {
      width: width;
  }
}

#box {
  stroke: black;
  stroke-width: 0.1;
  background-color: cornflowerblue;
  width: 100px;
  height: 100px;
  left: 100px;
  top: 135px;
  position: absolute;
}

.red{
  background-color: red !important;
}
<!DOCTYPE html>

<html lang="de">
  <head>
    <meta charset="utf-8" />
    <title>Title</title>
    <link rel="stylesheet" href="bc.css" />
  </head>

  <body>
    <div id="bar"></div>
    <div id="box"></div>
  </body>
</html>
0 голосов
/ 29 апреля 2020

Включите изменение цвета в анимацию css @keyframes. 

@keyframes changeBox {
  0% {  background-color: red; }
  99.99% { background-color: red; }
  100% { background-color: cornflowerblue;  }
}
.box {
  stroke: black;
  stroke-width: 0.1;
  background-color: cornflowerblue;
  width: 100px;
  height: 100px;
  left: 100px;
  top: 135px;
  position: absolute;
  animation-name: changeBox;
  animation-duration: 2s;
  animation-delay: 1s;
  transition-timing-function: ease-in-out;
}
0 голосов
/ 29 апреля 2020

попробуйте 

@keyframes expandBar {
  from {
      width: 0px;
  }
  to {
      width: width;
background:red;
  }
}

и добавьте transition:2s в стили .bar.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...