javascript - 如何延迟淡入并从 onclick 滑动 div

Question

我正在努力使用这个 JavaScript，因为我只是一名设计师，需要一些帮助

我有这段代码，可以在单击另一个页面上的按钮时使其滑入，但如何才能使其在滑入时也淡入？

如果您想查看它的运行情况，请访问该网站。如果您点击“portfolio”，您将看到有延迟的 slidIn 效果
<强> www.jacintodematos.co.uk

<script>
     function slideIn(el){
       var elem = document.getElementById(el);
       elem.style.transition = "left 0.5s ease-in 0.8s";
       elem.style.left = "0px";
     }
</script>

<a href="#item3" class="panel" onclick="slideIn('info_text');">PORTFOLIO</a>

Answer 1

您将transition的left更改为all，这样与left一起它也适用于opacity 。

我假设该元素有一个left，因此它位于可见窗口之外，并且opacity为0，因此我们可以淡入。然后我们只需将元素不透明度更改为1.

最后不确定延迟是什么意思，但如果您希望整个 fadeIn 在特定延迟后发生，请将其放入 setTimeout 中。

 function slideIn(el) {
     setTimeout(function () {
         var elem = document.getElementById(el);
         elem.style.transition = "left 2s ease-in-out, opacity 4s linear";
         elem.style.left = "0px";
         elem.style.opacity = 1;
     }, 1000);
 }

jsfiddle DEMO (updated)

编辑:

要控制时间，请使用转换中的时间参数:

transition: left 2s easi-in-out;

2s 表示 2 秒，如果太慢，则为 1.5 秒或更低，如果太快，则为 2.5 秒或 3 秒或其他。

如果你想为不同的样式设置不同的过渡，请用逗号分隔它们:

elem.style.transition = "left 2s ease-in-out, opacity 4s linear";

ease-in-out 使开始和结束更加平滑。