Question

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

事实证明，动画css有点令人头疼，因为它会弄乱我页面的堆叠顺序。

基本上我想要的只是我的div＆＃39; sheree_text_wrapper＆＃39;从画布开始并在页面加载时移动到它的位置。我决定缓慢淡入，任何事情，现在只是非常无聊而无法使用animate.css

框会根据视口宽度移动 - 因此它已经有了转换时间。

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

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');
});

在页面加载时运行css div transition

1 个答案: