为了做一个页面返回顶部的动态图标功能,思路是通过 JS 来响应当页面滑动到距离 scrollTop 400px 时显示返回顶部的对象图标,否则即隐藏,功能已经实现,但想在隐藏与显示过渡显示渐变动画,使用过程不显得突兀。

JS 中使用 display: none;display: block; 并不响应过渡动画,使用 visibility: visible;visibility: hidden; 即可完成效果。

.isVisible {
  visibility: visible;
  opacity: 1;
  transition: all 0.5s;
  -o-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -webkit-font-smoothing: antialiased;
}
.isHidden {
  visibility: hidden;
  opacity: 0;
  transition: all 0.5s;
  -o-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -webkit-font-smoothing: antialiased;
}

何星星原创文章仅用于个人学习,当前页面暂不支持复制操作,了解详情或文章转载请 点此 继续!

0 条评论

发表回复

Avatar placeholder

您的电子邮箱地址不会被公开。 必填项已用*标注