jquery - 在页面加载时运行 css div 转换

Question

我正在使用 animate css 制作一个包含文本的框，在页面加载时从右侧飞入。

事实证明，animate css 有点令人头疼，因为它打乱了我页面的堆叠顺序。

基本上我想要的只是我的 div“sheree_text_wrapper”从 Canvas 开始并在页面加载时移动到它的位置。我会满足于缓慢淡入，任何事情，现在不能使用 animate.css 真是太无聊了

盒子根据视口(viewport)宽度四处移动 - 因此它上面已经有过渡时间。

任何帮助都会很棒。提前致谢

html

<div class="sheree_text_wrapper">
    <h1>SHEREE WALKER</h1>        
    <nav>
        <ul id="hero_menu">
            <li> <a href="#about" class="scroll">About</a> </li>
            <li>|</li>
            <li> <a href="#portfolio" class="scroll">Portfolio</a> </li>
            <li>|</li>
            <li> <a href="#contact" class="scroll">Contact</a> </li>
        </ul> 
    </nav>   
</div>

CSS

.sheree_text_wrapper {
    min-width:220px;
    width:270;
    height:33px;
    z-index:10;
    margin-left:auto;
    margin-right:auto;
    -webkit-transition: 1s ease;
    -moz-transition: 1s ease;
    -o-transition: 1s ease;
    -ms-transition: 1s ease;
}

Answer 1

您可以在开始时将其放置在屏幕外添加一个类，一旦加载文档将给出其结束位置:

JS Fiddle

.sheree_text_wrapper {
    position: relative;
    left: -100%;
    min-width:220px;
    width:270;
    height:33px;
    z-index:10;
    margin-left:auto;
    margin-right:auto;
    -webkit-transition: 1s ease;
    -moz-transition: 1s ease;
    -o-transition: 1s ease;
    -ms-transition: 1s ease;
}
.sheree_text_wrapper.show{
   left: 0;
}

Jquery - addClass():

$(document).ready(function() {
    $('.sheree_text_wrapper').addClass('show');
});