英文:
active tab indicator line under tab button, how does it move?
问题
查看google翻译选项卡按钮的示例，当我们点击一个语言时，该语言下方的蓝色线会从之前的位置移动到当前点击的位置。
在CSS中，我可以看到一个类被添加/移除到活动/非活动选项卡按钮上，这个类控制按钮内部的span的opacity，手动设置opacity会使线条出现，但不会产生任何动画效果。
此外，如果我在包含线条的span上设置overflow:hidden，动画将不再从上一个选项卡按钮开始，但我没有看到任何由JavaScript设置的right或left，所以必须使用其他方法。
有人知道在点击选项卡按钮时，这条线移动的秘密吗？
英文:
Looking at google translate tab buttons for example, when we click on a language the blue line under that language moves from the preivous one the currently clicked one.
In the css I can see a class is removed/added to the active/inactive tabs buttons, which controls opacity for a span inside the button, and setting that opacity manually makes the line appear, but doesn't animate anything.
Also if I set overflow:hidden on the span containing the line, the animation won't start from the previous tab button anymore, but I don't see any right or left being set by js, so something else has to be used.
Anybody knows the secret behind this line moving when a tab button is clicked?
答案1
得分: 2
我假设你的意思是这样的。
<!-- 开始代码段：js 隐藏：true 控制台：true Babel：false -->
<!-- 语言: lang-js -->
function moveLine(button) {
var tabButtons = document.querySelectorAll('.tab-button');
var line = document.querySelector('.line');
// 从所有按钮中移除 'active' 类
tabButtons.forEach(function(tabButton) {
tabButton.classList.remove('active');
});
// 将 'active' 类添加到被点击的按钮
button.classList.add('active');
// 计算活动按钮的左侧位置
var activeButtonRect = button.getBoundingClientRect();
var containerRect = button.parentNode.getBoundingClientRect();
var offsetLeft = activeButtonRect.left - containerRect.left;
// 应用变换以移动线
line.style.transform = 'translateX(' + offsetLeft + 'px)';
}
<!-- 语言: lang-css -->
.tab-container {
position: relative;
display: flex;
}
.tab-button {
background: none;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
transition: opacity 0.3s;
}
.tab-button.active {
opacity: 1;
}
.line {
position: absolute;
width: 100px;
height: 3px;
background-color: blue;
transition: transform 0.3s;
}
body {
background-color: aqua;
}
<!-- 语言: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="tab-container">
<button class="tab-button active" onclick="moveLine(this)">Button 1</button>
<button class="tab-button" onclick="moveLine(this)">Button 2</button>
<button class="tab-button" onclick="moveLine(this)">Button 3</button>
<div class="line"></div>
</div>
<script src="app.js"></script>
</body>
</html>
<!-- 结束代码段 -->
英文:
I assume you meant something like this.
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-js -->
function moveLine(button) {
var tabButtons = document.querySelectorAll('.tab-button');
var line = document.querySelector('.line');
// Remove 'active' class from all buttons
tabButtons.forEach(function(tabButton) {
tabButton.classList.remove('active');
});
// Add 'active' class to the clicked button
button.classList.add('active');
// Calculate the left position of the active button
var activeButtonRect = button.getBoundingClientRect();
var containerRect = button.parentNode.getBoundingClientRect();
var offsetLeft = activeButtonRect.left - containerRect.left;
// Apply the transform to move the line
line.style.transform = 'translateX(' + offsetLeft + 'px)';
}
<!-- language: lang-css -->
.tab-container {
position: relative;
display: flex;
}
.tab-button {
background: none;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
transition: opacity 0.3s;
}
.tab-button.active {
opacity: 1;
}
.line {
position: absolute;
width: 100px;
height: 3px;
background-color: blue;
transition: transform 0.3s;
}
body {
background-color: aqua;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="tab-container">
<button class="tab-button active" onclick="moveLine(this)">Button 1</button>
<button class="tab-button" onclick="moveLine(this)">Button 2</button>
<button class="tab-button" onclick="moveLine(this)">Button 3</button>
<div class="line"></div>
</div>
<script src="app.js "></script>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论