javascript - 如何创建内容平滑过渡

Question

我有 2 个 div，div1 实际上在页面加载时显示，div2 不是，当用户点击 link1 我需要一个div1 到 div2 之间的平滑过渡。

我已经搜索并找到了一些使用 jquery 和其他库的变通方法，但我就是无法做到正确。如果有人可以帮助我，那就太好了。

Answer 1

在将在浏览器中触发硬件加速的属性上使用 CSS3 转换，即 CSS 不透明度属性

transition:opacity 1s ease;

要触发过渡，只需通过将不透明度设置为零的 JS 添加一个隐藏类到 div1

.hide{opacity:0;visibility:hidden;}

Vanilla JS 版本在这里 http://jsfiddle.net/sjmcpherso/L3fg08zp/

使用 jQuery 切换您可以使用的类:

$('#change').on('click',function(){
    $("#div1").toggleClass('hide');
});