使用 vue 轻松创建 2 状态、SVG 驱动的转换
使用库vue-svg-transition,您可以轻松地将微动画添加到您的 vue 应用程序中。 那么这个库是如何工作的呢? 基本上,一个 SVG 被缩小,而另一个 SVG 被同时放大。使用正确的时机可以在这两者之间创建一个非常好的过渡。 [的动画](https://res.cloudinary.com/practicaldev/image/fetch/s--YvwYH2Ge--/c_limit%
使用库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 上查看
更多推荐
所有评论(0)