时间戳

首页 > 解决方案 > 图标字体更改时平滑过渡

html - 图标字体更改时平滑过渡

问题描述

我正在使用图标字体制作暗模式按钮，我想知道从一个图标更改为下一个图标时是否有一种平滑过渡的方法？颜色有一个平滑的过渡，所以这不是问题，但图标的变化比颜色快。这是代码：

$(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>

我transition: color 0.3s ease-in-out, background-color 0.4s ease-in-out;在我的身体标签中使用来获得颜色过渡。

标签： htmljquerycss

解决方案

您可以使用 jQuery .fadeToggle()为图标添加淡入/淡出动画。您需要有两个绝对定位的图标和一个隐藏的 onload。

下面，我使用了 FontAwesome 图标集。我应用了 300 毫秒的延迟来匹配正文字体颜色的 0.3 秒过渡，但这可能是另一个延迟......

$(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>

推荐阅读