gpt4 book ai didi

javascript - 悬停建议以外的 css 过渡效果 onload

转载 作者:行者123 更新时间:2023-11-30 11:36:49 25 4
gpt4 key购买 nike

我一直在研究 CSS 过渡效果。一切正常,但尝试使用 :hover 以外的不同属性。

我正在寻找可以转换 div onload 的东西,例如,如果我在页面上并且我正在向下滚动,并且一旦我到达某个 div,那么转换属性就会应用。

这是我一直在尝试的片段,用于在将鼠标悬停在元素上时开始过渡,寻找类似但无需悬停即可自动加载的内容:

.box {
border-style: solid;
border-width: 1px;
display: block;
width: 760px;
height: 760px;
background-image: url("1.png");
-webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s;
transition: width 2s, height 2s, background-color 2s, transform 2s;
padding-bottom:20px;
}

.box:hover {
background-image: url("1.png");
width: 760px;
height: 760px;
-webkit-transform: rotate(180deg);
transform: rotate(-2deg);
padding-bottom:20px;
}

最佳答案

您将需要使用一些 Javascript 将具有适当过渡属性的特定类附加到您的 .box 容器以在加载时应用过渡。

请注意,需要应用 setTimeout 来附加类,以便转换可见,否则属性将被覆盖。

引用下面的demo:

setTimeout(function() {
document.getElementsByClassName("box")[0].classList.add("transitionBox");
}, 100);
.box {
border-style: solid;
border-width: 1px;
display: block;
width: 760px;
height: 760px;
background-image: url("1.png");
-webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s;
transition: width 2s, height 2s, background-color 2s, transform 2s;
padding-bottom: 20px;
}

.transitionBox {
background-image: url("1.png");
width: 760px;
height: 760px;
-webkit-transform: rotate(180deg);
transform: rotate(-2deg);
padding-bottom: 20px;
}
<div class="box"></div>

关于javascript - 悬停建议以外的 css 过渡效果 onload,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44107109/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com