clip-path配合动画实现组件划变效果clip-path 配合动画实现组件划变效果；推荐一个可以快速获取各种图

预览组件时，需要根据用户设置好的载入动画展示。其中移入和小移入两种用js实现起来比较简单，但是划变过渡效果用js实现起来就较为繁琐了。后来发现了css中的clip-path属性，用这个属性配合上动画实现划变效果只有两个字：嗯！真香！

这里推荐一个可以快速获取各种图形点坐标的真香网站。

clip-path

MDN上的描述：使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。该属性的值包括三类：

这次主要使用到了basic-shape来完成的这个需求

为了直观地演示各种图形的裁剪效果，贡献一张本人的照片😁

<shape-arg>{1,4} 代表 top right bottom left 是个方向的偏移量 [round <border-radius>]? 可选的圆角属性

    clip-path: inset(20px round 10% 20%);

[<shape-radius>]? 可选的圆的半径，缺省值默认为 50%
[at <position>]? 可选的圆心位置，缺省值默认为 center center

    clip-path: circle(50% at 30% center);;

[<fill-rule>,]? fill-rule 是一个外观属性，它定义了用来确定一个多边形内部区域的算法。相关信息见MDN

[<shape-arg> <shape-arg>]# 自定义每个点的x,y坐标，点坐标间以逗号分隔

    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);

突然想起来以前用css实现三角形都是

 .triangle {
        width: 0;
        height: 0;
        border: 10px solid;
        border-color: transparent transparent transparent #000;
      }

现在直接就可以用clip-path了，而且这种方式相比于上一种方式能画出更花哨的三角形。

移入.gif

小移入.gif