css - 如何在 vuetify 中使用动画材质图标
问题描述
通过 Vuetify 的v-icon
组件,使用主流材料设计图标非常简单,例如:
<v-icon>home</v-icon>
现在,我想知道是否支持动画材质图标并且可以以类似的方式在 Vuetify 中使用 - 我的意思是如果可能的话,不必添加额外的 css 代码行等。
在示例中,我注意到了fa-spin
for Font Awesome 的用法;但它超出了范围。我绑定到谷歌的素材图标库。
编辑:我需要的特定行为类型在此处的过渡部分的视频示例中:https ://material.io/design/iconography/animated-icons.html# [查看单击时play
按钮如何变成pause
平滑动画] .
解决方案
当我想在v-menu图标内切换扩展面板时模仿 V 形图标的动画时,我发现了这个页面。我不确定这是否正是您所需要的,但这就是我所做的:
<template>
<v-menu offset-y v-model="menuValue">
<template v-slot:activator="{ on }">
<v-btn v-on="on" :class="{active: menuValue}">
<v-icon>mdi-chevron-down</v-icon>
</v-btn>
</template>
</v-menu>
</template>
<script>
export default {
data() {
return {
menuValue: null
};
}
};
</script>
<style lang="scss" scoped>
.v-btn.active .v-icon {
transform: rotate(-180deg);
}
</style>
推荐阅读
- django - 只读属性在 Django 表单中是安全的吗?
- android - 如何解密来自 genymotion 的 SSL/TLS 流量
- javascript - 如何有条件地循环以将标题行映射到数据行
- python - Pytorch 错误,RuntimeError:预期标量类型 Long 但发现 Double
- google-maps - 使用 vue 路由器从另一个组件加载谷歌地图
- excel - 从单元格复制内容并粘贴到其他工作表中的新评论/注释中
- javascript - innerHTML 显示与预期不同
- javascript - 在批处理模式下编辑时如何停止在 JqGrid 上滚动
- ssh - 如何自定义 sam 构建以传递 ssh 并访问我在 GitHub 上的私人仓库?
- f# - F# 使用可区分联合的基类型