动画位置变化而不定义关键帧

Question

我有一个简单的菜单/子菜单

<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/

基本上我希望当鼠标悬停在父级上时出现子级...也

bottom 从 -100px 变为 -50px 以显示 child 向 parent 移动一点，bottom 的这种变化应该显示为动画，但它只是跳到上面，似乎没有动画

Answer 1

这样做的诀窍是在 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>

Answer 2

只需删除显示块，而没有您用来隐藏和显示的块。由于您使用不透明度来隐藏，因此您可以使用不透明度来制作动画。

.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>

Answer 3

.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 中！并将子类和父类设为兄弟！