Question

如何复制这种效果。

与slideUp()类似的效果。我希望元素动画向上/向下移动但是一旦到达某个点就开始折叠。

点击＆＃34;输入＆＃34; ＆＃34; La femme fatale＆＃34;向上/向下滑动并在经过某一点时崩溃。

我打算在css中使用jQuery动画。

Answer 1

它是CSS和JavaScript的组合。您需要使用JavaScript来触发点击，然后继续使用CSS transition和transform：

jQuery的：

$('button').click(function(e) {
    $('p').addClass('reduced');
});

CSS：

div {
  overflow: hidden;
}

p {
  transition: transform 1.5s cubic-bezier(0.86, 0, 0.07, 1) 500ms;
  transform: translate(0px, 0px);
}

div:first-child p.reduced {
  transform: translate(0px, 100px);
}

div:nth-child(2) p.reduced {
  transform: translate(0px, -100px);
}

HTML：

<div>
  <p>Femme</p>
</div>
<div>
  <p>fatale</p>
</div>

<button>Click</button>

演示：JSFiddle

向上/向下滑动元件并在某一点折叠？

1 个答案: