CSS 过渡：封面图片从下到上

Question

这是一个代码笔：https://codepen.io/jon424/pen/XWzGNLe

在本例中，如果您 select 按 toggle 按钮，图像将被另一个 div 覆盖。白色方块会从图像的顶部到底部逐渐覆盖图像。

我只是想扭转这种影响。我想让白色方块覆盖图像，从图像底部移动到顶部。

我试过在 .covered class 中为 max-height 使用负值，但没有用。知道我该怎么做吗？

document.querySelector('.child2').classList.add('covered');

document.querySelector('button').addEventListener('click', () => {
  document.querySelector('.child2').classList.toggle('covered');
});

.parent {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 10px;
  overflow: hidden;
}

.child1 {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.child2 {
  z-index: 1;
  background: #ffffff;
  transition: max-height 1s ease-in-out;
  max-height:100%;
}

.covered {
  max-height: 0px;
}

<button>Toggle</button>
<div class="parent">
  <img class="child1" src="https://picsum.photos/200/300">
  <div class="child1 child2"></div>
</div>

Answer 1

很简单：将.child1中的top: 0;属性改成bottom: 0;

Answer 2

通过在 .child2 上添加这些行，我得到了你想要的：

 bottom:0;
 top:unset;

这是完整的工作示例：

document.querySelector(".child2").classList.add("covered");

document.querySelector("button").addEventListener("click", () => {
  document.querySelector(".child2").classList.toggle("covered");
});

.parent {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 10px;
  overflow: hidden;
}

.child1 {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.child2 {
  z-index: 1;
  background: #ffffff;
  transition: max-height 1s ease-in-out;
  max-height: 100%;
  bottom:0;
  top:unset;
}

.covered {
  max-height: 0px;
}

<button>Toggle</button>
<div class="parent">
  <img class="child1" src="https://picsum.photos/200/300">
  <div class="child1 child2"></div>
</div>

Answer 3

这是另一种方法，您可以操纵 child2 的 top:

document.querySelector('button').addEventListener('click', () => { document.querySelector('.child2').classList.toggle('covered');});

.parent {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 10px;
  overflow: hidden;
}

.child1 {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.child2 {
  position: absolute;
  top: 100%;
  z-index: 1;
  background: #ffffff;
  transition: top 1s ease-in-out;
  max-height: 100%;
}

.covered {
  top: 0px;
}

<button>Toggle</button>
<div class="parent">
  <img class="child1" src="https://picsum.photos/200/300">
  <div class="child1 child2"></div>
</div>

Answer 4

不确定，但您是否正在寻找这种效果，我知道 CSS 解决方案，如果这对您有帮助。

.parent {
  position: relative;
}

.parent::before {
  content: "";
  position: absolute;
  height: 0;
  width: 100%;
  background-color: white;
  bottom: 100%;
  left: 0;
  transition: all 0.9s ease-in-out;
}

.parent:hover::before {
  height: 100%;
  bottom: 0;
  -webkit-transition: height 0.9s ease;
  transition: height 0.9s ease;
}

<div class="parent">
  <img class="child1" src="https://picsum.photos/200/300">
</div>
</div>

CSS 过渡：封面图片从下到上

CSS Transition: Cover Image From Bottom To Top

javascript

css

css-transitions