Question

我知道可以在“顶部”定位上使用CSS3动画。

我有一个图形，我希望通过在用户滚过某一点时将其向上滑动50px来转换。

我已经设法让文字改变但是我无法让它从50px顺利地移动到0px，而是“急剧跳跃”。

这是一个JS小提琴：https://jsfiddle.net/0rkbz7ox/

它可以删除“隐藏”类，它将top值从0调整回50但是它没有动画，尽管在原始版本中添加了transition班级名称。

图形的CSS：

.about-graphic{-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}
.about-graphic.hidden{position:relative;top:50px;}

Answer 1

只需将position: relative; top: 0;添加到.about-graphic，就像这样：

.about-graphic {
  ... // Your transitions
  position: relative;
  top: 0;
}

您可以增加过渡的持续时间以清楚地看到效果。

Answer 2

发现了我的错误。

原始状态需要top:0;和position:relative才能制作动画，所有原始CSS必须在那里。

.about-graphic{top:0;position:relative;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}

.about-graphic.hidden{top:50px;}

在“顶部”定位

2 个答案: