Javascript/CSS3 Transition

Javascript/CSS3 Transition

本文关键字：Transition CSS3 Javascript      更新时间：2023-09-26

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

有两件事，第一件：实际上，您可以将"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%;
}

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

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

第2步-->您的css（已将id修改为class-->#。）

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

步骤3-->JavaScript（只需添加css类）

function hover(id) {
document.getElementById(id).classList.add('image-strip');
}

只要确保你做了上述更改，你的代码就会工作。100%我遇到了同样的问题，LINK-->css反弹并在javascript 中添加类

更新1->

使用javascript、应用css

document.getElementById(id).style.webkitTransitionDuration="0.6s";
document.getElementById(id).style.webkitTransitionTimingFunction="linear";
document.getElementById(id).style.cursor="pointer";
相关文章：