单击切换功能中的剪辑路径过渡

Question

我一直在尝试在角落标签和整个 div 之间的切换中添加平滑过渡。

过渡适用于背景颜色（它会在 0.5 秒内缓慢变化）但由于某种原因它不适用于剪辑路径（我尝试过 clip-path 和 clipPath 但两者都不起作用）。

我猜这个问题比我对 javascript 的简单理解更深入，所以我向您寻求帮助。我希望标签页在 0.5 秒内缓慢打开/关闭。

编辑：按照答案中的建议，我将剪辑路径的值从 none 更改为 ellipse(200% 200% at 100% 0)以下。不幸的是，这并没有解决问题，因为现在我无法切换选项卡和整个 div。只需按一次。

由于某种原因，当剪辑路径是一个值时，它不会通过我的 else 语句运行该值。它适用于其他风格；像背景颜色 - 但不适用于剪辑路径......我已经尝试了几个小时，但我无法弄清楚。有谁知道导致问题的原因吗？

/*vlog toggle*/
function toggleStyle(el, vlog, value) {
  if (el.style[vlog] !== value) {
    el.style[vlog] = value;
  } else {
    el.style[vlog] = '';
  }
}

var btn = document.querySelector("#vlog")
var div = document.querySelector("#vlog")
btn.addEventListener("click", function () {
  toggleStyle(div, "clipPath", "ellipse(200% 200% at 100% 0)")
});

#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;
}

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

非常感谢您的帮助！

弗雷德

Answer 1

您无法转换到none

您可以尝试添加一个大形状，例如 ellipse(200% 200% at 100% 0)

编辑：我建议你切换一个类而不是切换样式

var btn = document.querySelector("#vlog")
var div = document.querySelector("#vlog")
btn.addEventListener("click", function() {
  div.classList.toggle("full-size");
});

#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;
  transition:background 1s, clip-path 0.5s;
  z-index: 999;
}

#vlog.full-size {
  clip-path: ellipse(200% 200% at 100% 0);
  background: blue;
}

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