点击切换功能中clip-path平滑过渡失效问题求助

问题原因 #

1. el.style 只能读取元素的内联样式，你在CSS样式表中定义的初始clip-path值不会出现在el.style对象中，导致判断逻辑不符合预期。
2. 浏览器会自动格式化JS设置的clip-path属性值，例如你写入的ellipse(200% 200% at 100% 0)会被自动转换为ellipse(200% 200% at 100% 0%)，全等判断永远无法匹配，触发不了else分支。
3. 你之前用none作为过渡终点无法触发效果，是因为none和ellipse属于不同类型的clip-path值，无法实现平滑过渡，现在使用同类型的ellipse值只要逻辑正确就能正常触发过渡。

推荐解决方案：类名切换 #

直接切换CSS类是最稳定的实现方式，不需要判断属性值，维护更简单：

修改后的CSS代码

#vlog {
  width: 300px;
  height: 300px;
  background-color: #0a1227;
  background-image: url('bg2.jpg');
  background-size: 100%;
  background-repeat: no-repeat;
  /* 初始收起状态 */
  clip-path: ellipse(150px 150px at 100% 0);
  position: absolute;
  cursor: pointer;
  top: 0;
  right: 0;
  z-index: 999;
  transition: background 1s, clip-path 0.5s ease;
}
/* 展开状态类 */
#vlog.expanded {
  clip-path: ellipse(200% 200% at 100% 0);
}

修改后的JS代码

const vlogEl = document.querySelector("#vlog");
vlogEl.addEventListener("click", function () {
  this.classList.toggle('expanded');
});

HTML代码无需修改

<div id='vlog'></div>

如果你需要保留直接修改style的实现方式 #

可以通过自定义属性标记状态，避开属性值格式化的问题：

function toggleStyle(el, prop, expandVal, collapseVal) {
  const isExpanded = el.dataset.expanded === 'true';
  el.style[prop] = isExpanded ? collapseVal : expandVal;
  el.dataset.expanded = isExpanded ? 'false' : 'true';
}

const vlogEl = document.querySelector("#vlog");
vlogEl.addEventListener("click", function () {
  toggleStyle(
    vlogEl, 
    "clipPath", 
    "ellipse(200% 200% at 100% 0)", 
    "ellipse(150px 150px at 100% 0)"
  );
});

以上两种方案都可以正常实现clip-path的0.5s平滑过渡效果，且支持无限次点击切换。

内容的提问来源于stack exchange，提问作者Fred Fredrik