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/

基本上，我希望孩子将鼠标悬停在父对象上时也会出现...

底部从-100px更改为-50px，以显示孩子向父级移动一点，底部的更改应显示为动画，但它只是跳到上方而没有动画

Answer 1

只需移除显示块，然后再将其隐藏和显示即可。由于您使用不透明度来隐藏，因此可以使用不透明度来制作动画。

.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中！并将子类和父类都设为同级！

Answer 3

这样做的技巧是在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>

在不定义关键帧的情况下对位置变化进行动画处理

3 个答案: