为了做一个页面返回顶部的动态图标功能,思路是通过 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

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