javascript - 导航栏活动链接动画
问题描述
我想知道如何在 VueJS 中制作这个动画?
我不知道如何在 DOM 中移动组件。
谢谢
解决方案
尝试这样的事情:
<template>
<div>
<h1>Browse</h1>
<div class="header">
<ul class="menu">
<li
:class="menuSelected == 'Categories' ? `selected` : ''"
@click="selectCategories"
>
Catetories
</li>
<li
:class="menuSelected == 'LiveChannels' ? `selected` : ''"
@click="selectLiveChannels"
>
Live Channels
</li>
</ul>
<div class="border" ref="border"></div>
</div>
<div>
<label>
Filter by
<input type="text" class="my-input" />
</label>
<p>{{ menuSelected }}</p>
</div>
</div>
</template>
<script>
export default {
data: () => ({
menuSelected: 'Categories',
}),
methods: {
selectLiveChannels() {
this.$refs.border.style.left = '7rem';
this.menuSelected = 'LiveChannels';
},
selectCategories() {
this.$refs.border.style.left = '0rem';
this.menuSelected = 'Categories';
},
},
};
</script>
<style>
body {
background-color: black;
color: white;
}
.header {
margin-bottom: 1rem;
}
.menu {
margin: 0;
padding: 0;
list-style-type: none;
}
.menu li {
padding: 1rem 0 0.5rem 0;
display: inline-block;
width: 7rem;
text-align: center;
}
.menu li:hover {
color: purple;
cursor: pointer;
}
.selected {
color: purple;
}
.border {
background-color: purple;
display: inline-block;
position: relative;
left: 0rem;
height: 0.33rem;
width: 7rem;
transition: left 0.3s;
}
.my-input {
border: 0;
background-color: rgb(50, 50, 50);
color: white;
padding: 0.5rem;
}
</style>
此代码必须放在单个文件组件中。
随意改变风格和行为。
推荐阅读
- python - Selenium webdriver:查找元素问题
- excel - 如果相应单元格包含“过期”一词,如何向特定收件人发送电子邮件?
- javascript - 将 WebAssembly 模块包装到 Web 组件中时出现异步问题
- android - Android Studio 北极狐 | 2020.3.1 Canary 14 找不到参数的方法 dependencyResolutionManagement()
- angularjs - 带有 AngularJS 指令的 Bootstrap 5 切换工具提示
- javascript - 如何通过异步函数创建动态href?
- protocol-buffers - “google.protobuf.Timestamp”未使用 Protobuf v2 定义
- azure - 获取模型时出错:无法在 Azure ADT 资源管理器中刷新访问令牌
- java - 如何在 Java JEditorPane 中自动将小写字母字符更新为大写字母?
- salesforce - 具有共享功能的 Salesforce Lightning 组件不起作用