Question

我试图通过从各个方向滑动来显示或隐藏一个面板，同时显示或隐藏另一个固定位置的面板，这就是我在标题中所说的。这是演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <style>
        .parent-panel {
            width: 200px;
            height: 200px;
            background-color: purple;
            margin-top: 10px;
            position: relative;
        }

        .child-panel {
            background-color: yellow;
            position: absolute;
            transition: all 0.5s ease;
            overflow: hidden;
        }

        .content {
            width: 50px;
            height: 100px;
            background-color: blue;
            margin: 40px auto;
        }

        #slide-down .child-panel {
            width: 100%;
            height: 0;
            bottom: 100%;
        }

        #slide-down:hover .child-panel {
            height: 100%;
            bottom: 0;
        }

        #slide-up .child-panel {
            width: 100%;
            height: 0;
            bottom: 0;
        }

        #slide-up:hover .child-panel {
            height: 100%;

        }

        #slide-right .child-panel {
            width: 0;
            height: 100%;
            right: 100%;
        }

        #slide-right:hover .child-panel {
            width: 100%;
            right: 0;
        }

        #slide-left .child-panel {
            width: 0;
            height: 100%;
            left: 100%;
        }

        #slide-left:hover .child-panel {
            width: 100%;
            left: 0;
        }
    </style>
</head>
<body>
<div id="slide-down" class="parent-panel">
    <div class="child-panel">
        <div class="content"></div>
    </div>
</div>
<div id="slide-up" class="parent-panel">
    <div class="child-panel">
        <div class="content"></div>
    </div>
</div>
<div id="slide-right" class="parent-panel">
    <div class="child-panel">
        <div class="content"></div>
    </div>
</div>
<div id="slide-left" class="parent-panel">
    <div class="child-panel">
        <div class="content"></div>
    </div>
</div>
</body>
</html>

我希望所有面板都显示或隐藏其蓝色方块，就像它像第一个面板一样在悬停之前或之后的固定位置。解决方案应围绕内容的边缘

.content {
    margin: 40px auto;
}

我们应该相对于父面板而不是子面板计算内容的边距。例如，对于上滑面板，应相对于父面板的顶部边框计算内容的垂直边距。但是经过大量研究后，我也不知道该怎么做，也找不到答案。

Answer 1

我会在我设置动画的元素上覆盖一个叠加层：

.parent-panel {
  width: 200px;
  height: 200px;
  background-color: purple;
  margin-top: 10px;
  position: relative;
  z-index:0;
}
.parent-panel::before {
  content:"";
  position:absolute;
  z-index:2;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:inherit;
  transition: all 0.5s ease;
}

.child-panel {
  background-color: yellow;
  overflow:hidden;
}

.content {
  width: 50px;
  height: 100px;
  background-color: blue;
  margin: 50px auto;
}

#slide-down:hover::before {
  bottom: 100%;
}
#slide-up:hover::before {
  top:100%;
}

#slide-right:hover::before {
  left:100%;
}

#slide-left:hover::before {
  right:100%;
}

<div id="slide-down" class="parent-panel">
  <div class="child-panel">
    <div class="content"></div>
  </div>
</div>
<div id="slide-up" class="parent-panel">
  <div class="child-panel">
    <div class="content"></div>
  </div>
</div>
<div id="slide-right" class="parent-panel">
  <div class="child-panel">
    <div class="content"></div>
  </div>
</div>
<div id="slide-left" class="parent-panel">
  <div class="child-panel">
    <div class="content"></div>
  </div>
</div>

您也可以考虑通过翻译来达到类似的效果：

.parent-panel {
  width: 200px;
  height: 200px;
  background-color: purple;
  margin-top: 10px;
  position: relative;
  z-index:0;
  overflow:hidden;
}

.child-panel {
  background-color: yellow;
  overflow:hidden;
  transition:1s all;
}

.content {
  width: 50px;
  height: 100px;
  background-color: blue;
  margin: 50px auto;
}
#slide-down .child-panel {
  transform:translateY(-100%);
}
#slide-up .child-panel {
  transform:translateY(100%);
}
#slide-right .child-panel {
  transform:translateX(-100%);
}
#slide-left .child-panel {
  transform:translateX(100%);
}
#slide-down:hover .child-panel,
#slide-up:hover .child-panel,
#slide-left:hover .child-panel,
#slide-right:hover .child-panel{
  transform:translate(0);
}

<div id="slide-down" class="parent-panel">
  <div class="child-panel">
    <div class="content"></div>
  </div>
</div>
<div id="slide-up" class="parent-panel">
  <div class="child-panel">
    <div class="content"></div>
  </div>
</div>
<div id="slide-right" class="parent-panel">
  <div class="child-panel">
    <div class="content"></div>
  </div>
</div>
<div id="slide-left" class="parent-panel">
  <div class="child-panel">
    <div class="content"></div>
  </div>
</div>

在滑行时显示悬停内容吗？

1 个答案: