我有一个脚本,可以给元素添加一个动画,让它们一个一个地淡出,我也有一些css,当你把鼠标放在它上面时,可以扩大元素的比例(使用:hover),我也用css添加了一个过渡。
/*eslint-env es6*/
$(document).ready(function(){
const selectCategory = document.getElementsByClassName("home-select-category-icon");
for (var i = 0; i < selectCategory.length; i++) {
selectCategory[i].style.animation = `fadeInCategory 2s ease-out ${ i/2+1 }s 1 forwards`;
}
});
我还有一些css,当你把鼠标放在元素上时,会扩大元素的比例(使用:hover),我还在css中添加了一个过渡。
当所有的东西都淡入后,过渡期工作了很短的时间,然后又恢复到没有过渡期的状态,而且缩放元素和非缩放元素之间的过渡也很迅速。
我想在缩放元素和非缩放元素之间有一个过渡,但每次淡入淡出完成后,都没有任何过渡。
我找遍了所有的地方都没有找到答案,我被卡住了,我花了好久的时间来寻找答案,但似乎都不适合我。
任何帮助,非常感谢
我认为你应该保留你的 animation
和 transition
的效果。将它们添加到同一个元素上(.home-select-category-icon
在你的例子中)会引起问题,因为如果你在动画同一个属性,它们会互相覆盖,比如说 transform
.
在我的评论中,我说你可以替换 transform
与 margin-top
但我认为最好是将它们分开--即使这意味着要创建一个包装div或span来做动画。
在你的例子中,我会把你的悬停过渡移到你的 .home-select-category
元素。
所以添加这个。
.home-select-category {
-webkit-transition:all 5s;
}
.home-select-category:hover {
-webkit-transform: scale(1.2);
}
然后把这些样式从 .home-select-category-icon
风格。
演示。
/*eslint-env es6*/
$(document).ready(function(){
const selectCategory = document.getElementsByClassName("home-select-category-icon");
for (var i = 0; i < selectCategory.length; i++) {
selectCategory[i].style.animation = `fadeInCategory 2s ease-out ${ i/2+1 }s 1 forwards`;
}
});
html{
height: 100%;
width: 100%;
}
#home-select-div{
-webkit-animation: 2s ease-out 0s 1 d;
}
@-webkit-keyframes fadeInCategory{
0% {opacity: 0; -webkit-transform: translateY(-30px);}
60% {-webkit-transform: translateY(0px);}
100% {opacity: 1;}
}
@-webkit-keyframes fadeInTitle{
0%{opacity: 0;}
100%{opacity: 1;}
}
html body #fb-spacer{
height:100%;
}
*{
margin: none;
padding: none;
}
body{
height: 100%;
width: 100%;
background: #121212;
}
#fb-spacer{
height: 100%;
width:100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#home-welcome{
font-family: "Muli", sans-serif;
color: white;
opacity: 0;
text-transform: uppercase;
letter-spacing: 20px;
padding: 100px 0px;
-webkit-animation: fadeInTitle 1.5s ease-in 0s 1 forwards;
}
#home-select-div{
width:80%;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.home-select-category-icon{
background: none;
border: none;
outline: none;
padding: 0px 50px;
opacity: 0;
}
.home-select-icon{
color: white;
font-size: 100px;
}
.home-select-category-subtitle{
color: white;
text-transform: uppercase;
letter-spacing: 5px;
font-size: 24px;
font-family: "Muli", sans-serif;
}
.home-select-category {
-webkit-transition:all 5s;
}
.home-select-category:hover {
-webkit-transform: scale(1.2);
}
<!DOCTYPE html>
<!--
_ _
| | | |
_ __ ___ ___ __| |_ _| | ___
| '_ ` _ \ / _ \ / _` | | | | |/ _ \
| | | | | | (_) | (_| | |_| | | (_) |
|_| |_| |_|\___/ \__,_|\__,_|_|\___/
-->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Modulo HTPC</title>
<link href="https://fonts.googleapis.com/css2?family=Muli:wght@300&display=swap" rel="stylesheet">
<link href="home.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/efa620f8a0.js" crossorigin="anonymous"></script>
<script async src="home.js"></script>
</head>
<body>
<div id="fb-spacer">
<div id="home-welcome">
<h1>Welcome back</h1>
</div>
<div id="home-select-div">
<button class="home-select-category-icon">
<div id="home-select-game" class="home-select-category">
<i class="fas fa-gamepad home-select-icon"></i>
<p class="home-select-category-subtitle">Gaming</p>
</div>
</button>
<button class="home-select-category-icon">
<div id="home-select-movie" class="home-select-category">
<i class="fas fa-video home-select-icon"></i>
<p class="home-select-category-subtitle">Movie</p>
</div>
</button>
<button class="home-select-category-icon">
<div id="home-select-music" class="home-select-category">
<i class="fas fa-music home-select-icon"></i>
<p class="home-select-category-subtitle">Music</p>
</div>
</button>
<button class="home-select-category-icon">
<div id="home-select-exit" class="home-select-category">
<i class="fas fa-sign-out-alt home-select-icon"></i>
<p class="home-select-category-subtitle">Exit</p>
</div>
</button>
</div>
</div>
</body>
</html>