Question

我想要一个从顶部垂直滑入视图的标题栏。

而不是简单地看起来好像在窗帘后面。

以下是使用 height 的动画：-

https://jsfiddle.net/AaronNGray/kf0br46u/31/

HTML

Widget buildTarget(CardItem? item) {
    if (item != null) {
      return Transform(
          alignment: FractionalOffset.center,
          transform: Matrix4.identity()
            ..setEntry(3, 2, 0.002)
            ..rotateY(pi*0.5),
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: ClipRRect(
              child: Container(
                height: 150,
                width: 150,
                color: Colors.white,
                child:Center(child: Image.asset(item.imageUrl)),
              ),
            ),
          ));
    } else {
      return Text('Errors');
    }

CSS

<div id="box">
    <div id="content">AaronNGray</div>
</div>

我需要的是能够为 top 设置动画，以便内容 div 从屏幕顶部向下滑动。

这是我尝试过的，但不起作用:-

https://jsfiddle.net/AaronNGray/kf0br46u/40/

body {
  margin: 0px;
  padding: 0px;
}
#box {
    height: 100px;
    width: auto;
    background: transparent;
    transition: all 0.4s ease-in-out;
}
#content {
    overflow: hidden;
    width: auto;
    background: white;
    height: 0px;
    transition: all 0.4s ease-in-out;
    border-bottom: 2px solid black;
    -webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
    -ms-transition: all .8s ease;
    -o-transition: all .8s ease;
    transition: all .8s ease;
}
#box:hover > #content {
    height: 50px;
    top: 0px;
}

希望你能帮忙，它可能是我遗漏的一些简单的东西，通常是:)

Answer 1

有几个问题。

首先，定位与例如如果未定义元素的位置，则 top 不起作用（如果是，则定位与它自身定位的第一个祖先相关）。

其次，box 元素定位在 -50px（高度的一半），这很好，但内容被放置在 -50px，这将把它放在 -100px（如果它被定位的话）。

这是您的代码片段，其中更改了这两件事：

body {
  margin: 0px;
  padding: 0px;
  position: relative;
}

#box {
  height: 100px;
  top: -50px;
  width: auto;
  transition: top 0.4s ease-in-out;
  position: relative;
}

#content {
  overflow: hidden;
  position: relative;
  top: 0px;
  width: auto;
  height: 50px;
  transition: top 0.4s ease-in-out;
  border-bottom: 2px solid black;
}

#box:hover #content {
  top: 50px;
}

<div id="box">
  <div id="content">AaronNGray</div>
</div>

Answer 2

StackOverflow 垄断了 Google 和互联网，并通过阻止人们提出他们为了完成工作而真正需要提出的问题来滥用这一点。你可能认为这个问题很愚蠢，但你在其他任何地方都找不到 CSS 答案了，你已经杀死了所有其他的 CSS 论坛！！！！！！

CSS 悬停触发垂直滑动动画标题

2 个答案: