Я создал код с помощью HTML / Css / Javascript, пока у меня есть анимация напитка, но я пытаюсь сделать так, чтобы анимация ключевых кадров css активировалась только тогда, когда оператор else coffee.refill () выполняется. (Оператор coffee.refill () else будет выполняться, когда я нажимаю кнопку пополнения и кофе пуст), но когда я смотрю в Интернете, я вижу только, как это сделать с Jquery, о котором у меня очень мало знаний.
Итак, как связать мой css с кнопкой JS - это в основном мой вопрос, но он также должен выполняться условно.
Что мне не хватает в этом коде, чтобы установить это css анимация Не могу понять Я даже не знаю, с чего начать.
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="Mug.css" />
</head>
<body>
<div id="cup">
<div id="handle"></div>
</div>
<p>Your Coffee is full Right now take a drink.</p>
<button id="drink">Drink</button>
<button id="refill">Refill</button>
<button id="Reset">Reset</button>
<p id = "text"></p>
<script type="module" src="coffee.js"></script>
</body>
</html>
Mug.css
*{
margin: 0;
padding: 0;
}
body{
background-color: #efb54a;
margin: 0px;
padding: 0px;
}
#cup {
height: 140px;
width: 180px;
border: 6px solid #efb54a;
position: absolute;
top: 40%;
left: 40%;
border-radius: 0px 0px 70px 70px;
background: url(./img/coffee.png);
box-shadow: 0px 0px 0px 6px white;
background-repeat: repeat-x;
background-position: 0px 140px;
animation: coffee 2.5s forwards;
}
@keyframes coffee{
0%{
background-position: 0px 140px;
}
20%{
background-position: -450px 100px;
}
40%{
background-position: -900px 50px;
}
80%{
background-position: -1350px -40px;
}
100%{
background-position: -1350px -40px;
}
}
#handle{
height: 70px;
width: 40px;
background-color: transparent;
border: 6px solid white;
position: relative;
left: 186px;
top: 2px;
border-radius: 0px 25px 80px 0px;
}
Coffee_Tree.js
export const coffee = {
refill: () => {
if(coffee.Empty == false){
console.log('cant refill your coffee isn\'t empty');
}else {
coffee.Empty = false;
console.log('refilled');
}
},
drink: () => {
if(coffee.Empty == true){
console.log('the coffee is empty, you need to refill it.')
}else {
coffee.Empty = true;
console.log('chug');
}
},
reset: () => {
coffee.Empty = false;
console.log('Coffee is now set to be full');
},
Empty: false,
}
coffee.js
import { coffee } from './Coffee_Tree.js';
const coffeeDrink = document.getElementById('drink');
const coffeeRefill = document.getElementById('refill');
const coffeeReset = document.getElementById('Reset');
coffeeDrink.addEventListener('click', () => {
coffee.drink();
})
coffeeRefill.addEventListener('click', () => {
coffee.refill();
})
coffeeReset.addEventListener('click', () => {
coffee.reset();
})