анимация изменения положения без определения ключевого кадра - PullRequest
Новая
       9

анимация изменения положения без определения ключевого кадра

0 голосов
/ 03 июня 2019

у меня есть простое меню / подменю 

<ul>
 <li class="parent">

   parent

   <div class="child">
       some stuff
   </div>

 </li>
</ul>

здесь css 

.parent { position : relative ; display:inline-block; background:green ; width:500px ; height : 50px  }
.child { 

position: absolute ; display:none ; background:red ;width:100% ; bottom:-100px ; height : 50px;opacity:0 ;

            transition: all 1s ease-in-out;
            -webkit-transition: all 1s ease-in-out;
            -moz-transition: all 1s ease-in-out;
            -o-transition: all 1s ease-in-out;
            -ms-transition: all 1s ease-in-out;

}
.parent:hover .child { display:block ; bottom:-50px ; opacity : 1  }

здесь jsfiddle

https://jsfiddle.net/7o3fxqvr/1/

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

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

Ответы [ 3 ]

0 голосов
/ 03 июня 2019 

.parent {
  display: inline-block;
  background: green;
  width: 100%;
  height: 50px;
}
.main{
   position: relative;
  width:500px;
}
.child {
  position: absolute;
  background: red;
  width:100%;
  bottom: -100px;
  height: 50px;
  opacity: 0;
  z-index: -1;
  transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
}

.parent:hover + .child {
  bottom: -50px;
  opacity: 1
}
<ul>
  <div class="main">
  <li class="parent">
    parent
  </li>
        <div class="child">
      some stuff
    </div>
</ul>

просто обернул оба в один div!и сделайте и дочерние и родительские классы как родного брата!

0 голосов
/ 04 июня 2019

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

.parent {
  position: relative;
  display: inline-block;
  background: green;
  width: 500px;
  height: 50px;
}

.child {
  position: absolute;
  background: red;
  width: 100%;
  top: 100%;
  left: -999em;
  margin-top: 50px;
  height: 50px;
  opacity: 0;
  /* the -o- and -ms- prefixes are not needed for this property */
  -webkit-transition: opacity 1s ease-in-out, margin 1s ease-in-out, left 0s 1s;
  -moz-transition: opacity 1s ease-in-out, margin 1s ease-in-out,left 0s 1s;
   transition: opacity 1s ease-in-out, margin 1s ease-in-out,left 0s 1s;
}

.parent:hover .child {
  left: 0;
  opacity: 1;
  margin-top: 0;
  -webkit-transition: opacity 1s ease-in-out, margin 1s ease-in-out,left 0s;
  -moz-transition: opacity 1s ease-in-out, margin 1s ease-in-out,left 0s;
   transition: opacity 1s ease-in-out, margin 1s ease-in-out,left 0s;
}
<ul>
  <li class="parent">

    parent

    <div class="child">
      some stuff
    </div>

  </li>
</ul>
0 голосов
/ 03 июня 2019

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

.parent {
  position: relative;
  display: inline-block;
  background: green;
  width: 500px;
  height: 50px;
}

.child {
  position: absolute;
  background: red;
  width: 100%;
  bottom: -100px;
  height: 50px;
  opacity: 0;
  z-index: -1;
  transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
}

.parent:hover .child {
  bottom: -50px;
  opacity: 1
}
<ul>
  <li class="parent">

    parent

    <div class="child">
      some stuff
    </div>

  </li>
</ul>
...