🍉需求

实现概化图(SVG)或者拓扑图中，两个节点之间连线的单向流动效果

🍑实现

思路

• 通过动态用js给指定标签添加删除css类
• css类为时间过渡动画还有裁剪位置

代码

横向从下到上

js
//标签默认添加的css
.cls-wyh2 {
    fill: #73e2fb;
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
    transition: clip-path 4s linear;
    /* 动画过渡效果 */

}

//动态添加删除的css
.cls-wyh2dh {
    fill: #2f95ac;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

//js代码.
//初始化的时候根据id获取页面元素
onMounted(() => {
    wyhriver.value = getelmenet('#_卫运河-2')
    qyhriver.value = getelmenet('#_七一河-2')
    lwriver.value = getelmenet('#_六五河-2')

})

//获取元素工具类
const getelmenet = (rvid) => {
    const weiyunheGroup = document.querySelector(rvid);
    const pathElement = weiyunheGroup.querySelector('path');
    return pathElement
}

//动画开始

const start = () => {
    startProgress()

    wyhriver.value.classList.add('cls-wyh2dh');
    qyhriver.value.classList.add('cls-qyh2dh');
    setTimeout(() => {
        lwriver.value.classList.add('cls-lwh2dh');
    }, 3600);
}

//动画结束
const reset = () => {
    jindu.value = 0

    wyhriver.value.classList.remove('cls-wyh2dh');
    qyhriver.value.classList.remove('cls-qyh2dh');
    lwriver.value.classList.remove('cls-lwh2dh');

    wyhriver.value.style.transition = 'none';
    qyhriver.value.style.transition = 'none';
    lwriver.value.style.transition = 'none';

    setTimeout(() => {
        wyhriver.value.style.transition = 'clip-path 4s linear';
        qyhriver.value.style.transition = 'clip-path 8s linear';
        lwriver.value.style.transition = 'clip-path 5.5s linear';
    }, 30);
}

纵向从左到右的css，逻辑相同css不同

css

.cls-qyh2 {
    fill: #73e2fb;
    clip-path: polygon(0 0, 0 100%, 0 100%, 0 0); /* 默认状态，水流完全隐藏 */
    transition: clip-path 8s linear;

}

.cls-qyh2dh {
    fill: #2f95ac;
    clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0); /* 水流从左到右 */
}