按下按钮动画答案

【问题标题】：Animation by pressing a button按下按钮动画
【发布时间】：2021-04-09 22:37:16
【问题描述】：

我想用 CSS 制作动画。我希望当我按下“工作”按钮时，黑色站点会过渡到底部。但是当我单击按钮时，什么也没有发生。可能我在 CSS 的最后一个参数中做错了，但我不知道是什么。

我已经尝试过使用 transform: translateY(-50vh);在最后一个论点。谢谢大家的回答。

body{
margin: 0 0 0 0;
font-family: 'Segoe UI';
background-color: turquoise;
text-align: center;
overflow: hidden;
}
.Home {
    transform: translateY(50vh);
}
.Work {
    color: #fff;
    background-color: transparent;
    border: 0;
    font-size: 150%;
    flex-direction: row;
    display: flex;
    align-self: center;
    align-content: center;
    z-index: 3;
    justify-content: center;
    align-items: center;
    position: absolute;
    text-align: center;
    margin: 0 auto;
    width: 100vw;
    height: 5vh;
    transform: translateY(-50vh);
}

.Workpg {
    color: white;
    height: 110vh;
    width: 110vw;
    top: -150vh;
    position: fixed;
    z-index: 4;
    background-color: rgb(0, 0, 0);
}
.Work:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

.Work:active .Workpg {
    top: 0;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Site Animation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="Home">
    <button class="Work" type="button">Work</button>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem harum voluptatibus nulla dolore sed, quisquam dignissimos hic deserunt corrupti fugit doloremque repellat, doloribus, animi maxime eum distinctio reprehenderit fuga. Facere.
</div>


    <div class="Workpg">
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident maiores dolore velit non soluta laborum beatae nulla ex veritatis sint autem fugit nisi facilis minima reiciendis ipsa, perspiciatis quibusdam nostrum!
    </div>
</body>
</html>

【问题讨论】：

标签： html css animation css-transitions

【解决方案1】：

CSS 动画非常适合“悬停”之类的内容以及此处或此处的一些装饰。

您还可以将一些东西拼凑在一起，感觉就像与复选框和事物进行交互，

但是 - 当您需要真正的“点击”事件和功能时 - 这就是 JavaScript 的用途。

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

console.clear();

var toggleBody = document.querySelector('.toggle-body');

toggleBody.addEventListener('click', function() {
    document.body.classList.toggle('toggled');
});

body {
    background-color: yellow;
    transition: 1s;
}

body button {
    transition: 2s;
}

body.toggled {
    background-color: orange;
}

body.toggled button {
    transform: translate(20px, 20px);
}

&lt;button class='toggle-body'&gt;Toggle body color&lt;/button&gt;

https://codepen.io/sheriffderek/pen/0e0f8227242c5481fbb978fa83a5859c

【讨论】：

【解决方案2】：

您可以在button 元素中添加Workpg div 也尝试添加 css transistons

body{
margin: 0 0 0 0;
font-family: 'Segoe UI';
background-color: turquoise;
text-align: center;
overflow: hidden;
}
.Home {
    transform: translateY(50vh);
}
.Work {
    color: #fff;
    background-color: transparent;
    border: 0;
    font-size: 150%;
    flex-direction: row;
    display: flex;
    align-self: center;
    align-content: center;
    z-index: 3;
    justify-content: center;
    align-items: center;
    position: absolute;
    text-align: center;
    margin: 0 auto;
    width: 100vw;
    height: 5vh;
    transform: translateY(-50vh);
    transition: all 0.5s;
}

.Workpg {
    color: white;
    height: 110vh;
    width: 110vw;
    top: -150vh;
    position: fixed;
    z-index: 4;
    background-color: rgb(0, 0, 0);
    transition: all 0.5s;
}
.Work:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

.Work:active .Workpg {
    top: 0;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Site Animation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="Home">
    <button class="Work" type="button"> <div class="Workpg">
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident maiores dolore velit non soluta laborum beatae nulla ex veritatis sint autem fugit nisi facilis minima reiciendis ipsa, perspiciatis quibusdam nostrum!
    </div>Work</button>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem harum voluptatibus nulla dolore sed, quisquam dignissimos hic deserunt corrupti fugit doloremque repellat, doloribus, animi maxime eum distinctio reprehenderit fuga. Facere.
</div>


   
</body>
</html>

【讨论】：