He estado tratando de agregar una transición suave al alternar entre una pestaña de esquina y todo el div.

La transición funciona con un color de fondo (cambia lentamente durante 0,5 s), pero por alguna razón no funcionará con el clip-path (he probado clip-path y clipPath pero ninguno funciona).

Supongo que el problema es más profundo que mi simple comprensión de javascript, así que pido ayuda a los profesionales. Quiero que la pestaña se abra/cierre lentamente durante 0,5 s.

EDITAR: cambié el valor de la ruta de recorte de ninguno a elipse (200% 200% a 100% 0) como se sugiere en una respuesta a continuación. Desafortunadamente, eso no resolvió el problema porque ahora no puedo alternar la pestaña y el div completo. Solo presiónelo una vez.

Por alguna razón, no ejecutará el valor a través de mi instrucción else cuando la ruta del clip sea un valor. Funciona para otros estilos; como background-color, pero no para clip-path... Lo he intentado durante horas y no puedo resolverlo. ¿Alguien por ahí que sepa qué está causando el problema?

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

¡La ayuda es muy apreciada!

Fred