Javascript/CSS3 过渡

Question

当“image-strip”悬停时，它会打开到其内容的高度。但是，这样做时应该也能平稳过渡。我究竟做错了什么？ CSS3 似乎没有影响它。

Javascript:

<script type="text/javascript">
function hover(id) {
document.getElementById(id).style.height="100%";
}
</script>

样式:

#image-strip{
    width: 100%;
    height: 300px;
    float: left;
    overflow: hidden;
    transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
    cursor: pointer;
}

#image-strip img{
    width: 100%;
}

HTML:

<div id="image-strip" onmouseover="hover('image-strip')"><img src="images/content/1.jpg"></div>

Answer 1

一些事情，第一个: 您实际上可以将“this”传递给您的函数调用，因为这样您就可以访问它并且不需要再次访问 DOM，从而节省时间和内存，虽然数量不多，但这是一种更好的做法。 onmouseover="hover(this)"

function hover(el) {
    el.style.height="100%";
}

第二件事:
CSS 过渡意味着在没有 Javascript 的情况下使用，关键是不需要 JS 来操作 DOM，这样才能使过渡正常工作:

#image-strip{
   width: 100%;
   height: 300px;
   float: left;
   overflow: hidden;
   transition: height 0.3s ease-in;
   -webkit-transition: height 0.3s ease-in;
   -moz-transition: height 0.3s ease-in;
   -ms-transition: height 0.3s ease-in;
   cursor: pointer;
}

#image-strip:hover {
   height: 100%;
}

你只需要在你想要影响的属性上调用转换，然后当元素状态发生变化时，比如悬停，转换就会开始。需要说明的是，你不需要任何 Javascript 来使用转换除非你可能添加或删除一个元素来启动过渡，但你不需要任何 JS 来完成你正在做的事情。希望这对您有所帮助。