Кнопка остается выбранной, а переключатель .classList в JS запускается только через раз - PullRequest
Новая
       9

Кнопка остается выбранной, а переключатель .classList в JS запускается только через раз

0 голосов
/ 13 февраля 2019

Я пытаюсь выполнить упражнение из курса, который я прохожу в Frontend Development.Проект представляет собой генератор случайных цветовых градиентов фона.

Я использую DOM-манипуляции для установки цветов, анимации кнопок с помощью классов CSS и т. Д.

У меня есть сомнения относительно того, как исправить 3 вещи:

1- Моя кнопка «Рандомизация» остается выбранной после нажатия, и вокруг нее появляется видимая синяя рамка выбора.Поэтому он не будет воспроизводить анимацию при наведении, пока пользователь не нажмет на кнопку.

2- Стили для моих элементов ввода цвета HTML не работают в Firefox и CSSанимация.Я не очень хорошо знаком с исправлением совместимости, поэтому не могу понять это: /

3- Чтобы анимировать два цветовых ввода, я использую метод classList.toggle javascript, чтобыпереключать анимированный класс CSS.Естественно, как следует из названия метода, он переключает класс, то есть анимация воспроизводится только каждый раз, когда пользователь нажимает кнопку рандомизации.Я перепробовал множество комбинаций «повторного включения» класса, но безрезультатно.

Я был бы очень признателен за любой вклад в эти вопросы, поскольку он очень помогает мне в процессе обучения!

Большое спасибо за чтение и заранее спасибо за любую помощь!

Код выглядит следующим образом (и извините, он все еще не очень красив или изменен: P): 

// variables
var css = document.querySelector("h3");
var color1 = document.querySelector(".color1");
var color2 = document.querySelector(".color2");
var rndmBtn = document.getElementById("randomizerButton");
var body = document.getElementById("gradient");

//  generate a random color
function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
  };

// set the initial gradient on page load
function setGradient() {
    body.style.background = "linear-gradient(to right, " + color1.value + ", " + color2.value + ")";
    css.textContent = body.style.background + ";";
};

// picks two random colors, assigns them to variables and sets input value and BG as the new colors
function randomColors() {
    var rndmCol1 = getRandomColor();
    var rndmCol2 = getRandomColor();

    document.querySelector(".color1").setAttribute("value", rndmCol1);
    document.querySelector(".color2").setAttribute("value", rndmCol2);
    document.getElementById("gradient").style.background = "linear-gradient(to right, " + rndmCol1 + ", " + rndmCol2 + ")";
    css.textContent = body.style.background + ";";
};

// function for pressing the space bar
function pressSpace() {
    if  (event.keyCode === 32) {
        randomColors();
        animateButton();
    }
    };

// function for animated button

function animateButton() {
    color1.classList.toggle("animated");
    color2.classList.toggle("animated");  
};

function animateButton2() {
    color1.classList.toggle("animated");
    color2.classList.toggle("animated");  
};

// call function that sets initial gradient on page load
setGradient();

//  event listeners for color picking
window.addEventListener("load", randomColors);
rndmBtn.addEventListener("click", animateButton);
color1.addEventListener("input", setGradient);
color2.addEventListener("input", setGradient);
rndmBtn.addEventListener("click", randomColors);
window.addEventListener("keydown", pressSpace);
body {
    font: 'Raleway', sans-serif;
    color: rgba(0,0,0,0.5);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .5em;
    top: 15%;
    background: linear-gradient(to right, #73ff01, #0bebeb);
}

h1 {
    font: 600 3.5em 'Raleway', sans-serif;
    color: rgba(0,0,0,0.5);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .5em;
    width: 100%;
}

h3 {
    font: 900 1em 'Raleway', sans-serif;
    color: rgba(0,0,0,0.5);
    text-align: center;
    text-transform: none;
    letter-spacing: 0.01em;
}

h2 {
    font-family: 'Raleway', sans-serif;
}

#randomizerButton {
    display: block;
    margin: auto;
    margin-top: 30px;
    font-family: 'Raleway', sans-serif;
    font-weight: bold;
    letter-spacing: .3em;
    padding: 10px;
    padding-right: 15px;
    padding-left: 15px;
    border: 1.5px solid;
    border-color:  rgba(0,0,0,0.5);
    background-color:  rgba(0,0,0,0.01);;
    border-radius: 20px;
    cursor: pointer;
}

#randomizerButton:hover {
    background-color:  rgba(0,0,0,0.2);;
    color: rgb(0, 0, 0);
}

#randomizerButton:active {
    background-color:  rgba(0,0,0,0.4);;
    color: rgb(0, 0, 0);
}

input[type=color]{
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 10px;
    background: none;
    cursor: pointer;
}

input[type="color"]::-webkit-color-swatch-wrapper {
	padding: 0;
}

input[type="color"]::-webkit-color-swatch {
	border: none;
	border-radius: 10px;
}

.color1, .color2 {
    border: none;
}

.colorInfo {
    margin: auto;
    width: 50%;
    margin-top: 50px;
    border: 1.5px solid;
    border-color:  rgba(0,0,0,0.5);
    border-radius: 10px;
}


/* Input boxes Animation */

.animated {
    -webkit-animation: animation 1000ms linear both;
    animation: animation 1000ms linear both;
  }
  
/* Generated with Bounce.js */
  
  @-webkit-keyframes animation { 
    0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    3.6% { -webkit-transform: matrix3d(0.705, 0.717, 0, 0, -0.551, 0.841, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.705, 0.717, 0, 0, -0.551, 0.841, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    4.3% { -webkit-transform: matrix3d(0.606, 0.804, 0, 0, -0.641, 0.776, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.606, 0.804, 0, 0, -0.641, 0.776, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    7.21% { -webkit-transform: matrix3d(0.208, 0.987, 0, 0, -0.897, 0.463, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.208, 0.987, 0, 0, -0.897, 0.463, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    8.61% { -webkit-transform: matrix3d(0.06, 1.007, 0, 0, -0.957, 0.319, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.06, 1.007, 0, 0, -0.957, 0.319, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    12.91% { -webkit-transform: matrix3d(-0.179, 0.989, 0, 0, -1.005, 0.015, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.179, 0.989, 0, 0, -1.005, 0.015, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    13.51% { -webkit-transform: matrix3d(-0.191, 0.986, 0, 0, -1.004, -0.01, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.191, 0.986, 0, 0, -1.004, -0.01, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    17.22% { -webkit-transform: matrix3d(-0.198, 0.982, 0, 0, -0.997, -0.094, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.198, 0.982, 0, 0, -0.997, -0.094, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    19.72% { -webkit-transform: matrix3d(-0.163, 0.987, 0, 0, -0.995, -0.103, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.163, 0.987, 0, 0, -0.995, -0.103, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    26.03% { -webkit-transform: matrix3d(-0.053, 0.999, 0, 0, -0.998, -0.06, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.053, 0.999, 0, 0, -0.998, -0.06, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    28.33% { -webkit-transform: matrix3d(-0.024, 1, 0, 0, -0.999, -0.041, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.024, 1, 0, 0, -0.999, -0.041, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    32.23% { -webkit-transform: matrix3d(0.007, 1, 0, 0, -1, -0.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.007, 1, 0, 0, -1, -0.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    39.44% { -webkit-transform: matrix3d(0.017, 1, 0, 0, -1, 0.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.017, 1, 0, 0, -1, 0.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    44.74% { -webkit-transform: matrix3d(0.009, 1, 0, 0, -1, 0.004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.009, 1, 0, 0, -1, 0.004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    57.26% { -webkit-transform: matrix3d(-0.001, 1, 0, 0, -1, 0.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.001, 1, 0, 0, -1, 0.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    61.66% { -webkit-transform: matrix3d(-0.001, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.001, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    82.28% { -webkit-transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    83.98% { -webkit-transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    100% { -webkit-transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 
  }
  
  @keyframes animation { 
    0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    3.6% { -webkit-transform: matrix3d(0.705, 0.717, 0, 0, -0.551, 0.841, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.705, 0.717, 0, 0, -0.551, 0.841, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    4.3% { -webkit-transform: matrix3d(0.606, 0.804, 0, 0, -0.641, 0.776, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.606, 0.804, 0, 0, -0.641, 0.776, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    7.21% { -webkit-transform: matrix3d(0.208, 0.987, 0, 0, -0.897, 0.463, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.208, 0.987, 0, 0, -0.897, 0.463, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    8.61% { -webkit-transform: matrix3d(0.06, 1.007, 0, 0, -0.957, 0.319, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.06, 1.007, 0, 0, -0.957, 0.319, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    12.91% { -webkit-transform: matrix3d(-0.179, 0.989, 0, 0, -1.005, 0.015, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.179, 0.989, 0, 0, -1.005, 0.015, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    13.51% { -webkit-transform: matrix3d(-0.191, 0.986, 0, 0, -1.004, -0.01, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.191, 0.986, 0, 0, -1.004, -0.01, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    17.22% { -webkit-transform: matrix3d(-0.198, 0.982, 0, 0, -0.997, -0.094, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.198, 0.982, 0, 0, -0.997, -0.094, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    19.72% { -webkit-transform: matrix3d(-0.163, 0.987, 0, 0, -0.995, -0.103, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.163, 0.987, 0, 0, -0.995, -0.103, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    26.03% { -webkit-transform: matrix3d(-0.053, 0.999, 0, 0, -0.998, -0.06, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.053, 0.999, 0, 0, -0.998, -0.06, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    28.33% { -webkit-transform: matrix3d(-0.024, 1, 0, 0, -0.999, -0.041, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.024, 1, 0, 0, -0.999, -0.041, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    32.23% { -webkit-transform: matrix3d(0.007, 1, 0, 0, -1, -0.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.007, 1, 0, 0, -1, -0.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    39.44% { -webkit-transform: matrix3d(0.017, 1, 0, 0, -1, 0.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.017, 1, 0, 0, -1, 0.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    44.74% { -webkit-transform: matrix3d(0.009, 1, 0, 0, -1, 0.004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.009, 1, 0, 0, -1, 0.004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    57.26% { -webkit-transform: matrix3d(-0.001, 1, 0, 0, -1, 0.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.001, 1, 0, 0, -1, 0.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    61.66% { -webkit-transform: matrix3d(-0.001, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.001, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    82.28% { -webkit-transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    83.98% { -webkit-transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    100% { -webkit-transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 
  }

 /* Bounce In */

.hvr-bounce-in {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
.hvr-bounce-in:hover, .hvr-bounce-in:focus, .hvr-bounce-in:active {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
  transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
    <title>Gradient Background</title>
</head>
<body id="gradient">
    <h1>Background Generator</h1>
    <input class="color1 animated" type="color" name="color1" id="" value="#73ff01">
    <input class="color2 animated" type="color" name="color2" id="" value="#0bebeb">
    <button id="randomizerButton" class="hvr-bounce-in">Randomize!</button>
    <div class="colorInfo">
        <h2>Current CSS Background</h2>
        <h3></h3>
    </div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

1 Ответ

0 голосов
/ 13 февраля 2019

Я мог бы помочь вам с вопросом о кнопке.Кнопка все еще активна после того, как вы нажмете на нее, и вам потребуется нажать ее еще раз, прежде чем она деактивируется => Это то, что я понимаю из вашего вопроса.

, чтобы исправить это, напишите простую функцию, которая переключает кнопкупри каждом щелчке, поэтому вам не нужно нажимать его снова, чтобы деактивировать. 

function toggleBtn () { this.rndmBtn = !this.rndmBtn};

Это должно работать.Затем вызовите toggleBtn () везде, где нужно нажать кнопку.Надеюсь, это поможет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...