在不定义关键帧的情况下动画位置变化

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

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

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

.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！并使 child 和 parent 类成为兄弟 !

Answer 3

这样做的诀窍是在 left 属性完全隐藏时给它一个大的负值，并使用 transition-delay 以便其他属性有时间转换.缺点是元素上要转换的所有属性都必须单独指定。

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

在不定义关键帧的情况下动画位置变化

animating position change without defining keyframe

html

css

animation

transition