Transition on clip-path in a click toggle function-CodePudding

I've been trying to add a smooth transition in a toggle between a corner tab and the entire div.

The transition works with a background color (it changes slowly over 0.5s) but for some reason it won't work with the clip-path (I've tried clip-path and clipPath but neither works).

I'm guessing the problem goes deeper than my simple understanding of javascript so I'm turning to you pros for help. I want the tab to open/close slowly for 0.5s.

EDIT: I changed the value of the clip-path from none to ellipse(200% 200% at 100% 0) as suggested in an answer below. Unfortunately that didn't solve the problem because now I can't toggle the tab and entire div. Only press it once.

For some reason it won't run the value through my else statement when the clip-path is a value. It works for other styles; like background-color - but not for clip-path... I've tried for hours and I can't figure it out. Anybody out there who knows what is causing the problem?

/*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>

Help is much appreciated!

Fred

CodePudding user response：

You cannot transition to none

You can try adding a big shape like ellipse(200% 200% at 100% 0)

EDIT : I davise you to toggle a class instead of toggling style

/*vlog toggle*/


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

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

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