当图标字体改变时平滑过渡
当图标字体改变时平滑过渡
提问于 2020-12-19 00:08:30
我正在制作一个使用图标字体的深色模式按钮，我想知道当从一个图标切换到下一个图标时，是否有一种方法可以平滑过渡？颜色有一个平滑的过渡，所以这不是问题，但图标的变化速度比颜色快。代码如下：
$(document).ready(function() {
$('.daynight').click(function() {
$('body').toggleClass('night');
$('.daynight span').toggleClass('th-sun');
});
});body.night {
background: #292f36;
color: white!important;
}
.daynight span {
cursor: pointer;
padding: 10px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="daynight"><span class="th th-moon"></span></div>
我在body标记中使用transition: color 0.3s ease-in-out, background-color 0.4s ease-in-out;来获得颜色转换。
回答 1
Stack Overflow用户
发布于 2020-12-19 01:01:01
可以使用jQuery .fadeToggle()将淡入/淡出动画添加到图标。你需要有两个绝对定位的图标，其中一个隐藏在加载中。
下面，我使用了FontAwesome图标集。我应用了300ms的延迟来匹配正文字体颜色的0.3s过渡，但它可能是另一个延迟...
$(document).ready(function () {
$(".daynight").click(function () {
$("body").toggleClass("night");
$(".daynight span").fadeToggle(300); // 300ms delay
});
});body {
transition: color 0.3s ease-in-out, background-color 0.4s ease-in-out;
}
body.night {
background: #292f36;
color: white !important;
}
.daynight span {
cursor: pointer;
padding: 10px;
position: absolute;
}
.fa.fa-sun {
display: none;
color: orange;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body class="night">
<div class="daynight">
<span class="fa fa-moon"></span><span class="fa fa-sun"></span>
</div>
</body>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65360269
复制相关文章
相似问题
腾讯云开发者
