CSS HTML渐显动画效果的实现方法

一、CSS渐显动画效果基础介绍

CSS渐显动画效果是指在元素的出现和消失时，通过CSS的过渡效果来实现平滑过渡，使页面效果更加优美。在 CSS 中，渐变动画可以通过 transition 属性简单实现。

通过设置 transition-duration 来控制过渡时间，设置 transition-property 来指定变化的 CSS 属性，设置 transition-timing-function 来控制过渡的动画效果。以下是一个简单的 CSS 渐显动画效果：

.fade-in {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.fade-in.show {
  opacity: 1;
}

以上代码中，设置了 opacity 初始为 0，使用 transition 属性设置 opacity 过渡时间为 1s，动画效果为 ease-in-out，表示渐显动画效果默认为 ease-in-out。CSS fade-in 元素默认隐藏，加上.show 类即可让元素渐现。

二、CSS渐显动画效果实战应用

在实际开发中，我们可以通过 CSS 渐显效果来优化页面用户体验。比如当用户进行下拉刷新时，在加载数据前通过渐显效果提醒用户页面正在加载数据，同时在数据加载完成后通过渐隐效果使加载提示消失，以下是一个如何带有CSS渐显动画效果的下拉刷新组件：

  

  
   

  
   
下拉刷新
   
  
   
努力加载中...
   

  



<script>
  var refreshEl = document.querySelector('.refresh');
  var spinnerEl = refreshEl.querySelector('.spinner');
  var isLoading = false;
  refreshEl.addEventListener('touchstart', function (e) {
    var startY = e.touches[0].pageY;
    var pullDownInitTop = refreshEl.offsetTop;
    var pullDownState = 0;
    function touchmoveHandler(e) {
      var touchY = e.touches[0].pageY;
      var pullDownOffset = touchY - startY;
      if (pullDownOffset > 0 && window.scrollY <= 0) {
        refreshEl.style.top = (pullDownOffset / 2 + pullDownInitTop) + 'px';
        if (pullDownOffset > 50) {
          pullDownState = 1;
          spinnerEl.style.display = 'block';
          refreshEl.classList.add('loading');
          isLoading = true;
        } else {
          pullDownState = 0;
          spinnerEl.style.display = 'none';
          refreshEl.classList.remove('loading');
          isLoading = false;
        }
      }
      e.preventDefault();
      e.stopPropagation();
    }
    function touchendHandler(e) {
      if (isLoading) {
        setTimeout(function () {
          refreshEl.style.top = pullDownInitTop + 'px';
          spinnerEl.style.display = 'none';
          refreshEl.classList.remove('loading');
          isLoading = false;
        }, 1000);
      } else {
        refreshEl.style.top = pullDownInitTop + 'px';
      }
      e.preventDefault();
      e.stopPropagation();
    }
    document.addEventListener('touchmove', touchmoveHandler, {passive: false});
    document.addEventListener('touchend', touchendHandler, {passive: false});
  });
</script>

以上代码中，使用了 opacity 和 transition 来实现渐显效果，通过添加 loading 类来控制加上 loading 动画标识。具体实现效果可以访问 CodeSandbox 查看。

三、CSS渐显动画效果与JavaScript结合使用

在实际开发中，我们会在某些特殊场景下使用JavaScript来实现CSS渐显动画效果并结合CSS，比如在hover事件、页面滚动事件、单页面路由切换事件。

以下是一个如何结合CSS与JavaScript实现hover特效的代码示例：

CSS样式表
.hover-fade {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-color: rgba(0, 0, 0, .3);
  transition: opacity .4s ease-out;
}


  

  
  
   


  

JavaScript代码
var hoverWrap = document.querySelector('.hover-wrap');
hoverWrap.addEventListener('mouseenter', function () {
  hoverWrap.querySelector('.hover-fade').style.opacity = 1;
});
hoverWrap.addEventListener('mouseleave', function () {
  hoverWrap.querySelector('.hover-fade').style.opacity = 0;
});

在以上代码中，通过设置 CSS 的 opacity 和 transition 来控制图片hover之后颜色变化以及变化动画。动画实现逻辑：鼠标进入事件触发事件回调函数，随后改变.opacity 这个 CSS 属性。transition 样式名用于设置具体的渐变效果，用于控制变化的时间以及响应函数。

四、总结

本篇文章主要从CSS渐显动画效果基础、实战应用、JavaScript结合使用三个方面对学习CSS HTML渐显动画效果的实现方法做了详细阐述。希望读者能够在实际开发过程中更好的运用该技术，优化用户体验。