CSS анимация - исчезновение и исчезновение - PullRequest
Новая
       7

CSS анимация - исчезновение и исчезновение

0 голосов
/ 06 сентября 2018

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

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

ul{
  list-style:none;
  padding:0px;
  margin:0px;
}
ul >li >ul{
  display:none;
}
ul >li:hover >ul{
  display:block;
}

.fade_in {
  -webkit-animation-name: fade_in;
  -webkit-animation-duration: 1s;
  animation-name: fade_in;
  animation-duration: 1s;
}
@-webkit-keyframes fade_in {
  from {opacity: 0} 
  to {opacity: 1}
}
@keyframes fade_in {
  from {opacity: 0} 
  to {opacity: 1}
}

.fade_out {
  -webkit-animation-name: fade_in;
  -webkit-animation-duration: 1s;
  animation-name: fade_in;
  animation-duration: 1s;
}
@-webkit-keyframes fade_out {
  from {opacity: 1} 
  to {opacity: 0}
}
@keyframes fade_out {
  from {opacity: 1} 
  to {opacity: 0}
}
<ul>
  <li>Heading
    <ul class="fade_in">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </li>
</ul>

Ответы [ 2 ]

0 голосов
/ 06 сентября 2018

вы можете попробовать что-то вроде этого

HTML 

<div>Heading
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
</div>

CSS 

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

div>ul {
    opacity: 0;
    position: absolute;
    pointer-events: none;
    visibility: hidden;
    transition: visibility 0s 1s, opacity 1s linear;
    overflow: hidden;
}

div:hover>ul {
    pointer-events: all;
    visibility: visible;
    opacity: 1;
    transition: opacity 1s linear;
}
0 голосов
/ 06 сентября 2018

То, чего вы хотите достичь, намного проще, используя CSS переход вместо анимации , например: 

transition: opacity .4s ease-in-out;

Поскольку вы не можете ни анимировать, ни изменять свойство display, я изменил состояние по умолчанию с display: none; на opacity: 0;. 

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul>li>ul {
  opacity: 0;
  position: absolute;
  pointer-events: none;
  transition: opacity .4s ease-in-out;
}

ul>li:hover>ul {
  pointer-events: all;
  opacity: 1;
}
<ul>
  <li>Heading
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </li>
</ul>
...