剪切路径变化时的悬停转换

Question

使用这段代码，悬停效果是有效的，右下角消失了，但没有过渡效果，这是出了些问题吗？

.mydiv:hover{
      background-color: blue;
      clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 0% 100%);
      transition: 0.5s ease;
 }

- afs125874

---

尝试为.mydiv添加过渡效果。 - Madhawa Priyashantha

@MadhawaPriyashantha，它不起作用。 - doğukan

Answer 1

你需要添加一个初始的clip-path定义，以实现两个状态之间的转换。

.box {
  background-color: blue;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  transition: 0.5s ease;
  height:150px;
}

.box:hover {
  clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 0% 100%);
}

<div class="box">

</div>

您也可以使用背景图像，以获得更好的支持：

.box {
  background: 
    linear-gradient(blue,blue) left,
    linear-gradient(to bottom right,blue 49.5%,transparent 50%) right;
  background-size:100% 100%,0% 100%;
  background-repeat:no-repeat;
  transition: 0.5s ease;
  height:150px;
}

.box:hover {
  background-size:80.1% 100%,20% 100%;
}

<div class="box">

</div>

- Temani Afif

Answer 2

如果你想要在伪类中使用过渡属性，需要将其设置为类。

.mydiv {
  background: red;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  transition: all 0.5s ease;
}

.mydiv:hover {
   background: blue;
   clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 0% 100%);
 }

<div class="mydiv">
  Hello world
</div>

- Andrew Kovalchuk

---

问题不在于过渡效果，它可以在:hover时设置并且可以正常工作，但是当取消:hover时就没有过渡效果了。 - Temani Afif

@TemaniAfif 如果您启动我的代码片段，您会发现过渡效果在取消悬停时仍然有效。 - Andrew Kovalchuk

这就是我说的，移动transition属性只会在未悬停时添加过渡效果，但代码的主要问题不在于过渡效果，而在于clip-path的值。 - Temani Afif