使用库vue-svg-transition,您可以轻松地将微动画添加到您的 vue 应用程序中。

那么这个库是如何工作的呢?

基本上,一个 SVG 被缩小,而另一个 SVG 被同时放大。使用正确的时机可以在这两者之间创建一个非常好的过渡。

[的动画](https://res.cloudinary.com/practicaldev/image/fetch/s--YvwYH2Ge--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https:// /raw.githubusercontent.com/kai-oswald/vue-svg-transition/master/assets/demo.gif)

安装

npm i vue-svg-transition

import Vue from 'vue';
import SvgTransition from 'vue-svg-transition';

Vue.use(SvgTransition);

用途

使用vue-svg-loader,我们可以导入 SVG 并像 vue 组件一样使用它们。

这导致了非常简洁的语法。

<template>
    <svg-transition>
        <MyIcon slot="initial" />
        <MyOtherIcon />
    </svg-transition>
</template>

<script>
import MyIcon from "./assets/MyIcon.svg";
import MyOtherIcon from "./assets/MyOtherIcon.svg";

export default {
    components: {
        MyIcon,
        MyOtherIcon
    }
}
</script>

这已经是所有的魔法了。默认情况下,转换在click上触发,但您也可以使用trigger属性传递hover或none。

<svg-transition trigger="hover">
<!-- your icons -->
</svg-transition>

您还可以使用ref以编程方式触发转换。

<svg-transition ref="transition" trigger="none">
<!-- your icons -->
</svg-transition>

<script>
export default {
    mounted() {
        this.$refs.transition.performTransition();
    }
}
</script>

kai-oswald/vue-svg-transition

创建 2 态、SVG 驱动的转换

vue-svg-transition

创建 2 态、SVG 驱动的动画图标

Codesandbox 演示

灵感来自Icon Transition Generator

快速入门

npm install --save vue-svg-transition

从“视图”导入视图;

从'vue-svg-transition'导入SvgTransition;

Vue.use(SvgTransition);

模板示例

建议使用vue-svg-loader以便我们可以从外部文件导入 SVG 但也可以使用内联 SVG。

<模板>

<svg-transition :size\u003d"size">

<MyIcon slot\u003d"initial" />

<我的其他图标 />

</svg-过渡>

</模板>

<脚本>

从“./assets/MyIcon.svg”导入MyIcon;

从“./assets/MyOtherIcon.svg”导入 MyOtherIcon;

导出默认 {

成分: {

我的图标,

我的其他图标

}

数据() {

返回 {

尺寸: {

宽度:48,

身高:48

}

}

}

}

</脚本>

通过ref以编程方式触发

<svg-transition ref\u003d"transition"

...

在 GitHub 上查看