Javascript 页面加载时如何滑出元素？

下面是一个使用悬停的示例

我想在页面加载时滑动，而不是悬停。我该怎么做？注意，我更喜欢反应溶液。不过，CSS/HTML解决方案也不错

以下是一些示例代码：

<div id="slideout">
  <img src="http://eduardovalencia.com/wp-content/uploads/2011/03/FEEDBACK-LOGO-PURPLE.jpg" alt="Feedback" />
  <div id="slideout_inner">
    Hi Welcome to Stack Overflow
  </div>
</div>

---

下面是一个使用JQuery及其.animate（）方法的解决方案

---

我会将

：悬停

更改为类

。打开

，然后添加身体负荷的类：

const slideout\u el=document.getElementById（'slideout'））
window.onload=（）=>slideout\u el.classList.add（'open'）

#滑出{
位置：固定；
顶部：40px；
左：0；
-webkit转换持续时间：0.3s；
-moz转换持续时间：0.3s；
-o-过渡持续时间：0.3s；
过渡时间：0.3s；
}
#内滑出{
位置：固定；
顶部：40px；
左：-250px；
-webkit转换持续时间：0.3s；
-moz转换持续时间：0.3s；
-o-过渡持续时间：0.3s；
过渡时间：0.3s；
}
#滑出{
左：250px；
}
#滑出。打开#滑出#内部{
左：0；
}
img
{
宽度：100px；
高度：100px；
}

JS-Bin
欢迎来到Stack Overflow

我不相信您可以通过简单的修改来实现这一点，因为悬停事件无法通过编程触发。我不想触发悬停事件。当页面加载时，我希望动画/css将文本或组件从页面左边框滑入页面。我已经尝试使用componentDidMount和setTimeout来添加一个类，但是这并不能使内容动画化。这是一个不带悬停且仅在页面加载时的解决方案

#slideout {
    position: fixed;
    top: 40px;
    left: 0;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

#slideout_inner {
    position: fixed;
    top: 40px;
    left: -250px;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

#slideout:hover {
    left: 250px;
}

#slideout:hover #slideout_inner {
    left: 0;
}

img {
    width: 100px;
    height: 100px;
}

$('#slideout_inner').animate({left: 0});