Скорость и порядок перехода CSS - PullRequest
Новая
       0

Скорость и порядок перехода CSS

1 голос
/ 08 мая 2020

сообщество

Я пытаюсь создать что-то вроде оверлейного меню с HTML и CSS.

Вот моя идея: когда моя мышь наводит курсор на розовый прямоугольник, анимация показывает синяя рамка, затем другая анимация показывает красную рамку. Это похоже на «двойное» раскрывающееся меню.

Мой HTML: 

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Visualization</title>
  </head>
  <body>
    <div id="stats-dropdown">
      <div id="stats-title"><span>Rendering statistics</span></div>
      <div id="stats">
        <div>Number of Instances : 50</div>
        <div>Number of Surfaces : 1200</div>
        <div>Number of Patches : 5000</div>
        <div>Number of Elements : 10000</div>
        <div>Number of Vertices : 30000</div>
        <div>Running time : 50 ms</div>
      </div>
    </div>
  </body>
</html>

Мой CSS: 

body,
html {
  padding: 0;
  margin: 0;
}

#stats-dropdown {
  position: absolute;
  top: 20px;
  left: 20px;

  font-size: larger;
  font-family: 'Courier', Arial, monospace;
  font-weight: bold;
  color: black;

  background-color: palevioletred;
  height: 40px;
  width: 20px;
}

#stats-title {
  background-color: teal;

  width: 350px;
  height: 40px;
  margin-left: 20px;

  display: flex;

  white-space: nowrap;
  overflow: auto
}

#stats-title > span {
  margin: auto;
}

#stats {
  height: 200px;
  margin-left: 20px;

  background-color: tomato;

  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  text-align: center;
}

#stats-dropdown #stats {
  height: 0px;
  overflow: hidden;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out 0.5s;
}

#stats-dropdown #stats-title {
  width: 0px;
  overflow: hidden;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

#stats-dropdown:hover #stats {
  height: 200px;
  width: 350px;
}

#stats-dropdown:hover #stats-title {
  height: 40px;
  width: 350px;
}

Мои проблемы заключаются в том, что во время " закрытие », красный прямоугольник исчезает без анимации, и иногда я замечал, что красный прямоугольник может появляться перед синим, несмотря на задержку перехода.

Вот JSFiddle , если вы хотите попробуйте.

Можете ли вы помочь мне разобраться в моих проблемах?

Я запускаю это на Firefox (не знаю, имеет ли это значение).

Ответы [ 2 ]

2 голосов
/ 08 мая 2020

По-прежнему можно видеть немедленное исчезновение красного поля, но я решил проблему появления красного поля перед окном заголовка: 

#stats {
  height: 200px;
  margin-left: 20px;

  background-color: tomato;
  transition-delay: 0.5s;

  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  text-align: center;
}

Основным отличием было transition-delay: 0.5s;, которое задерживает переход 0.5s, то есть время, необходимое для отображения заголовка. Но по поводу немедленного исчезновения красного квадрата я все еще работаю ... Извините за половину ответа, я постараюсь поработать над этим и добавить, как только найду ответ. Надеюсь, это сработает с задержкой.

1 голос
/ 08 мая 2020

Хорошо. Пожалуйста, отметьте, что я пытался выполнить в соответствии с вашим запросом. Я добавил несколько строк, проверьте. position: absolute; top: 100%; дюйм #stats 

#stats-dropdown {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: larger;
  font-family: 'Courier', Arial, monospace;
  font-weight: bold;
  color: black;
  background-color: palevioletred;
  height: 40px;
  width: 20px;
}

#stats-title {
  background-color: teal;
  width: 350px;
  height: 40px;
  margin-left: 20px;
  display: flex;
  white-space: nowrap;
  overflow: auto;
}

#stats-title>span {
  margin: auto;
}

#stats-dropdown #stats-title {
  width: 0px;
  overflow: hidden;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

#stats-dropdown:hover #stats-title {
  height: 40px;
  width: 350px;
}

#stats {
  height: 200px;
  width: 350px;
  margin-left: 20px;
  background-color: tomato;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  text-align: center;
  height: 0px;
  overflow: hidden;
  position: absolute;
  top: 100%;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  ;
}

#stats-dropdown:hover #stats {
  height: 250px;
  width: 350px;
}
<div id="stats-dropdown">
  <div id="stats-title"><span>Rendering statistics</span></div>
  <div id="stats">
    <div>Number of Instances : 50</div>
    <div>Number of Surfaces : 1200</div>
    <div>Number of Patches : 5000</div>
    <div>Number of Elements : 10000</div>
    <div>Number of Vertices : 30000</div>
    <div>Running time : 50 ms</div>
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...