隐藏点标识（Hide dots indica）状态转换实现方法分享

折腾了好一阵子，我一直在找怎么实现隐藏点标识的状态转换方案，搜遍了全网都没找到相关的现成内容（也可能是我搜索关键词不对没搜到），最后只能自己一点点摸索测试，终于搞定了，现在把具体方法分享给大家：

核心思路 #

通过CSS定义两种状态的样式，再结合JavaScript触发样式切换，还可以加上平滑过渡提升交互体验。

具体步骤 #

• 定义状态样式
  先给标识元素设置基础样式，再分别定义显示和隐藏状态的样式：

  /* 基础样式：根据你的需求调整位置、大小等 */
  .dots-indicator {
    position: fixed;
    bottom: 20px;
    right: 20px;
    transition: opacity 0.3s ease, transform 0.3s ease; /* 平滑过渡动画 */
  }
  
  /* 隐藏状态 */
  .dots-indicator.hidden {
    opacity: 0;
    transform: translateY(10px); /* 添位移动画增强视觉反馈 */
    pointer-events: none; /* 隐藏后不响应点击事件 */
  }
  
  /* 显示状态（如果需要单独定义，也可以直接用元素默认样式） */
  .dots-indicator.show {
    opacity: 1;
    transform: translateY(0);
  }
  

• 添加状态切换逻辑
  用JavaScript控制元素类名切换，从而实现状态转换：

  // 获取标识元素
  const dotsIndicator = document.querySelector('.dots-indicator');
  
  // 手动切换状态的函数
  function toggleDotsState() {
    dotsIndicator.classList.toggle('hidden');
    // 如果用show类控制，就改成：dotsIndicator.classList.toggle('show');
  }
  
  // 绑定触发事件，比如点击按钮切换
  document.querySelector('.toggle-dots-btn').addEventListener('click', toggleDotsState);
  
  // 也可以根据页面行为自动切换，比如滚动到一定位置显示/隐藏
  window.addEventListener('scroll', () => {
    if (window.scrollY > 300) {
      dotsIndicator.classList.remove('hidden');
    } else {
      dotsIndicator.classList.add('hidden');
    }
  });
  

• 按需调整细节

  • 如果不需要过渡动画，直接用display: none和display: block切换即可，但没有平滑效果
  • 要是你的标识是SVG或其他元素，样式调整逻辑完全通用，只需要替换选择器就行

内容的提问来源于stack exchange，提问作者Sebastián García Burgos