如何动画到位置固定？

我尝试动画1秒后得到修复的DIV。但我无法完成。我想在一秒钟后称为“homepage-hero-module”的div从右向左滑动。正如你在FIDDLE中看到的那样，它会在一秒钟后更改为固定。那么如何动画呢？如何动画到位置固定？

我试着用CSS，但没有运气。

-webkit-transition: left 1s; 
    -moz-transition: left 1s; 
    -o-transition: left 1s; 
    transition: left 1s;

和

-webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease;

JSFIDDLE

HTML代码：

<div class="container-fluid"> 
    <div class="homepage-hero-module"> 
     Container with data 
    </div> 
</div>

CSS代码：

body, html { 
    margin: 0px; 
    padding: 0px; 
    width: 100%; 
    height: 100%; 
} 
.container-fluid { 
    width: 100%; 
    height: 100%; 
    position: relative; 
} 
.homepage-hero-module { 
    background: #DDD; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
} 
.fixed { 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    width: 20px; 
    height: 100%; 
    background: red; 
} 
img { 
    height: 100%; 
    width: auto; 
}

JS代码：

$(document).ready(function() { 
    setTimeout(function(){ 
       $('.homepage-hero-module').addClass('fixed'); 
    },1000); 
});

来源

2016-08-12 AndrewS

任何理由不使用jQuery内置滑动式过渡？ https://api.jqueryui.com/slide-effect/ – AgataB

你需要同时位置仍然是绝对的动画宽度，然后设置位置固定

<div class="container-fluid"> 
    <div class="homepage-hero-module"> 
     Container with data 
    </div> 
</div> 

body, html { 
    margin: 0px; 
    padding: 0px; 
    width: 100%; 
    height: 100%; 
} 
.container-fluid { 
    width: 100%; 
    height: 100%; 
    position: relative; 
} 
.homepage-hero-module { 
    background: #DDD; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    transition:all .2s ease; 
} 
.fixed { 
    top: 0px; 
    left: 0px; 
    width: 20px; 
    height: 100%; 
    background: red; 
} 
img { 
    height: 100%; 
    width: auto; 
} 

$(document).ready(function() { 
setTimeout(function(){ 
    $('.homepage-hero-module').addClass('fixed'); 
},1000); 
    $('.homepage-hero-module').css('position','fixed'); 
});

来源

2016-08-12 12:51:08 jessh

哦，是的。谢谢。 – AndrewS

@jessh好的答案，你也可以在固定的类中设置位置而不使用jQuery –

已经工作我猜，请检查下面的代码片段，让我知道你的反馈。谢谢！

$(document).ready(function() { 
 
    setTimeout(function() { 
 
    $('.homepage-hero-module').addClass('fixed'); 
 
    }, 1000); 
 
});

body, 
 
html { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.container-fluid { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: relative; 
 
} 
 
.homepage-hero-module { 
 
    background: #DDD; 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
} 
 
.fixed { 
 
    position: fixed; 
 
    top: 0px; 
 
    left: 0px; 
 
    width: 20px; 
 
    height: 100%; 
 
    background: red; 
 
    -webkit-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    -o-transition: all 0.5s ease; 
 
    transition: all 0.5s ease; 
 
} 
 
img { 
 
    height: 100%; 
 
    width: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container-fluid"> 
 
    <div class="homepage-hero-module"> 
 
    Container with data 
 
    </div> 
 
</div>

来源

2016-08-12 12:52:23 kukkuz

您可以只需用CSS做。检查CSS3 animation。

现场演示：

body, 
 
html { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    width: 100%; 
 
    min-height: 100%; 
 
} 
 
.container-fluid { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: relative; 
 
} 
 
.homepage-hero-module { 
 
    width: 100%; 
 
    height: 100vh; 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    background-color: #f5f5f5; 
 
    animation: slideleft 1s 0.3s ease-out forwards; 
 
} 
 
img { 
 
    height: 100%; 
 
    width: auto; 
 
} 
 
@keyframes slideleft { 
 
    to { 
 
    background: coral; 
 
    width: 70px; 
 
    position: fixed; 
 
    } 
 
}

<div class="container-fluid"> 
 
    <div class="homepage-hero-module"> 
 
    Container with data 
 
    </div> 
 
</div>

来源

2016-08-12 13:11:33 Pugazh

如何动画到位置固定？

回答

相关问题