常用过渡动画总结

css3动画

进度条生长动画

animation: processLine 1.5s linear 1;
@keyframes processLine {
    from {
        width: 0px;
    }

    to {
        width: width;
    }
}

从左侧/右侧 剪裁入剪裁出

animation: MachineRoomLeftIn 1s linear 1;
@keyframes MachineRoomLeftIn {
    0% {
        clip: rect(0px 0px 350px 0px);
    }
    75% {
        clip: rect(0px 190px 350px 0px);
    }
    100% {
        clip: rect(0px 384px 350px 0px);
        // opacity: 1;
    }
}

@keyframes leftOut {
    from {
        clip: rect(0px 384px 350px 0px);
        // opacity: 1;
    }
    to {
        clip: rect(0px 0px 350px 0px);
        // opacity: 0;
    }
}

vue transition动画

左右两侧面板滑入滑出动画

<transition name="left">
</transition>
<transition name="right">
</transition>

.left-enter,
.left-leave-to {
    opacity: 0;
    transform: translateX(-290px);
}

.left-enter-active,
.left-leave-active,
.right-enter-active,
.right-leave-active {
    transition: all 0.8s ease;
}

.right-enter,
.right-leave-to {
    opacity: 0;
    transform: translateX(290px);
}

淡入淡出

<transition name="fadein">
</transition>

.fadein-enter,
.fadein-leave-to {
    opacity: 0;
}

.fadein-enter-active,
.fadein-leave-active {
    transition: all 0.8s ease;
}