[英]Change the flex-direction on button click
I am trying to create an animation effect that moves two buttons when I click on them.我正在尝试创建一个动画效果,当我点击它们时移动两个按钮。 I have the flex direction set up as a column in the container div and I essentially just want them to position as a flex row when I click on one of them (probably with a 1s animation).
我将 flex 方向设置为容器 div 中的一列,我基本上只希望它们在我单击其中一个时定位为 flex 行(可能带有 1s 动画)。 When I click on them currently nothing happens.
当我点击它们时,目前没有任何反应。 Here is my code sample:
这是我的代码示例:
HTML HTML
<header>
<div class="container">
<h1>Choose Your Allegiance</h1>
<div id="buttons">
<button class="fill"><img src="/assets/Jedi.png" alt="Jedi" /></button>
<button class="fill sith">
<img src="/assets/Sith.png" alt="Sith" />
</div>
</button>
</div>
</header>
CSS CSS
.container {
width: 100vw;
display: flex;
flex-direction: column;
align-items: center;
}
.container.click {
flex-direction: row;
justify-content: space-around;
}
h1 {
margin-left: 5vw;
color: black;
font-family: "Poller One", cursive;
font-variant: small-caps;
font-size: 3rem;
margin-top: 6vh;
}
button {
color: white;
transition: 0.25s;
float: left;
margin: 2%;
}
button:hover,
button:focus {
border: 2px solid red;
color: black;
}
.fill {
height: 120px;
width: 150px;
background: transparent;
margin-top: 4vh;
outline: none;
border: none;
}
.fill:hover,
.fill:focus {
box-shadow: inset 0 0 0 4.5em #add8e6;
}
.sith:hover,
.sith:focus {
box-shadow: inset 0 0 0 4.5em black;
}
#buttons {
height: 100%;
width: 100vw;
padding-top: 10vh;
display: flex;
justify-content: center;
}
JS JS
document.querySelector("button").addEventListener("click", () => {
document.querySelector(".container").classList.toggle(".container.click");
});
You are using classList.toggle
wrong.您正在使用
classList.toggle
错误。 You'll need to do this instead:你需要这样做:
const container = document.querySelector(".container");
container.classList.toggle("click");
Documentation on Element.classList
here . 关于
Element.classList
文档在这里。
There are a couple of changes you need to make to get this to work:您需要进行一些更改才能使其正常工作:
1. document.querySelector("button")
is only selecting the first button. 1.
document.querySelector("button")
只选择第一个按钮。 There are 2 you can add an event listener to the buttons有 2 个您可以向按钮添加事件侦听器
document.querySelectorAll("button")
to get all the buttons, and then you can loop through them adding an event Listener to each one:document.querySelectorAll("button")
获取所有按钮,然后您可以遍历它们,为每个按钮添加一个事件侦听器: document.querySelectorAll("button").forEach(function(button) {
button.addEventListener("click", () => {
document.querySelector(".container").classList.toggle("click");
});
});
buttons
container - you can get the element using getElementById
and then add the listener to it:buttons
容器添加事件侦听器 - 您可以使用getElementById
获取元素,然后向其中添加侦听器:var buttons = document.getElementById("buttons");
buttons.addEventListener("click", (e) => {
document.querySelector(".container").classList.toggle("click");
});
2. You just use the class name when passing a class into toggle
- you don't need the .
2. 您只需在将类传递给
toggle
时使用类名- 您不需要.
. . Also, you only need to toggle the
click
class as the container
class will always apply.此外,您只需要切换
click
类,因为container
类将始终适用。 So what you need to use is .toggle("click");
所以你需要使用的是
.toggle("click");
Working Example (without your images):工作示例(没有您的图像):
var buttons = document.getElementById("buttons"); buttons.addEventListener("click", (e) => { document.querySelector(".container").classList.toggle("click"); });
.container { width: 100vw; display: flex; flex-direction: column; align-items: center; } .container.click { flex-direction: row; justify-content: space-around; } h1 { margin-left: 5vw; color: black; font-family: "Poller One", cursive; font-variant: small-caps; font-size: 3rem; margin-top: 6vh; } button { color: red; transition: 0.25s; float: left; margin: 2%; } button:hover, button:focus { border: 2px solid red; color: black; } .fill { height: 120px; width: 150px; background: transparent; margin-top: 4vh; outline: none; border: none; } .fill:hover, .fill:focus { box-shadow: inset 0 0 0 4.5em #add8e6; } .sith:hover, .sith:focus { box-shadow: inset 0 0 0 4.5em black; } #buttons { height: 100%; width: 100vw; padding-top: 10vh; display: flex; justify-content: center; }
<header> <div class="container"> <h1>Choose Your Allegiance</h1> <div id="buttons"> <button class="fill">Jedi</button> <button class="fill sith">Sith</button> </div> </div> </header>
As for animating this change, unfortunately CSS animations cannot be applied to flexbox direction property .至于动画这个变化,不幸的是, CSS 动画不能应用于 flexbox 方向属性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.