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

Question

Here is an example of this with hover http://jsfiddle.net/MK87R/1/这是一个带有悬停的示例http://jsfiddle.net/MK87R/1/

I want to slide on page load not hover.我想在页面加载时滑动而不是悬停。 How do I do this?我该怎么做呢？ Note, I prefer a react solution.请注意，我更喜欢反应解决方案。 However, a CSS/HTML solution would be nice too.但是，CSS/HTML 解决方案也不错。

Here is some sample code:下面是一些示例代码：

<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>

CSS: CSS：

#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;
}

Answer 1

Here is a solution using JQuery and its .animate() method..这是使用 JQuery 及其 .animate() 方法的解决方案。

http://jsfiddle.net/MK87R/510/ http://jsfiddle.net/MK87R/510/

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

Answer 2

I would change the :hover to a class .open and then add the class on body load:我会将:hover更改为类.open ，然后在身体负载上添加类：

 const slideout_el = document.getElementById('slideout') window.onload = () => slideout_el.classList.add('open')

 #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.open { left: 250px; } #slideout.open #slideout_inner { left: 0; } img { width:100px; height:100px; }

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <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> </body> </html>

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

问题描述

2 个解决方案

解决方案1
0 2018-11-10 03:18:41

解决方案2
0 2019-07-25 23:56:06

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

问题描述

2 个解决方案

解决方案1 0 2018-11-10 03:18:41

解决方案2 0 2019-07-25 23:56:06

解决方案1
0 2018-11-10 03:18:41

解决方案2
0 2019-07-25 23:56:06