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

Question

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

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

我猜这个问题比我对 javascript 的简单理解更深入，所以我向专业人士寻求帮助。我想让标签慢 open/close 0.5 秒。

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

由于某些原因，当 clip-path 是一个值时，它不会运行通过我的 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)

编辑： 我建议您切换 class 而不是切换样式

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>

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

Transition on clip-path in a click toggle function

javascript

css

transition

clip-path