как изменить значения ключевых кадров "с - на" onclick с помощью javascript - PullRequest
Новая
       4

как изменить значения ключевых кадров "с - на" onclick с помощью javascript

1 голос
/ 05 августа 2020

Ну, я создал веб-сайт colorFlipper, он работает нормально, но я хочу добавить к нему некоторые функции. Поэтому я решил поработать над анимацией css с javascript, но столкнулся с некоторыми проблемами. Что я хочу сделать, так это плавно изменить цвет фона при нажатии, и цвет должен быть шестнадцатеричным цветом, который генерируется случайным образом при каждом щелчке. Я сделал так, чтобы цвет менялся плавно, но он работает только в первый раз, потом цвет меняется сразу без анимации

это мои html - css - Js файлы. 

// Getting Elements

const button = document.getElementById("btn");
const color = document.querySelector(".color");
const background = document.querySelector("main");
const mainStyles = window.getComputedStyle(background);
let currentMainColor = mainStyles.getPropertyValue('background-color');;


console.log(background)

// Event listners
button.addEventListener("click", changecolor);


//Functions


function changecolor() {

    const newColor = `#${Math.floor(Math.random()*255**3).toString(16).padStart(6,0)}`;
    let styleTag = document.querySelector("style");
    console.log(styleTag);
    if (styleTag !== null) {
        styleTag.remove();
        var style = document.createElement('style');
        style.innerHTML =
            `@keyframes example1 {
        from {background-color : ${currentMainColor}}
        to {background-color: ${newColor};}}`
        var ref = document.querySelector('script');
        // Insert our new styles before the first script tag
        ref.parentNode.insertBefore(style, ref);
    } else {
        var style = document.createElement('style');
        style.innerHTML =
            `@keyframes example2 {
        from {background-color : ${currentMainColor}}
        to {background-color: ${newColor};}}`
        var ref = document.querySelector('script');
        // Insert our new styles before the first script tag
        ref.parentNode.insertBefore(style, ref);

    }
    currentMainColor = newColor;
    color.innerHTML = newColor;




}
*,
 ::after,
 ::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Roboto Mono", sans-serif;
}

html {
    height: 90vh;
}

body {
    font-family: "Roboto Mono", sans-serif;
    overflow: hidden;
}

nav {
    height: 3rem;
    display: flex;
    align-items: center;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
    z-index: 9999;
}

nav a {
    text-decoration: none;
}

.nav-container {
    width: 90vw;
    max-width: 620px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-container h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-right: 1rem;
    color: #49A6E9;
    letter-spacing: 0.25rem;
}

.nav-container ul {
    list-style: none;
    display: flex;
}

.nav-container ul li a {
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    margin-right: 1rem;
    color: hsl(205deg 86% 17%);
    letter-spacing: 0.25rem;
    transition: all 0.2s ease;
}

.nav-container ul li a:hover {
    color: #49A6E9;
}

main {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #F1F5F8;
    z-index: -1;
}

.animation1 {
    animation-name: example1;
    animation-duration: 4s;
    animation-fill-mode: forwards;
}

.animation2 {
    animation-name: example2;
    animation-duration: 4s;
    animation-fill-mode: forwards;
}

.container {
    text-align: center;
}

.container h1 {
    background: #222222;
    color: #FFFFFF;
    padding: 1rem;
    width: 50rem;
    border-radius: 10px;
    margin-bottom: 2.5rem;
    font-size: 2.5rem;
}

.color {
    color: #49A6E9;
}

.btn {
    padding: 0.7rem 2rem;
    border: 3px solid #222222;
    border-radius: 7px;
    background-color: transparent;
    cursor: pointer;
}

.btn:focus {
    outline: none;
}

.btn-hero {
    font-size: 1.7rem;
    text-transform: uppercase;
    letter-spacing: 0.25rem;
    transition: all 0.3s linear;
}

.btn-hero:hover {
    color: #F1F5F8;
    background-color: #222222;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Colot Flipper</title>
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet">
    <!-- Custom Css -->
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <nav>
        <div class="nav-container">
            <a href="index.html">
                <h4 class="brand-name">Color Flipper</h4>
            </a>
            <ul class="menu">
                <li><a href="index.html">Simple</a></li>
                <li>
                    <a href="hex.html">Hex</a>
                </li>
            </ul>
        </div>
    </nav>
    <main class="animation1 animation2">
        <div class="container">
            <h1>Background Color : <span class="color">#F1F5F8</span></h1>
            <button class="btn btn-hero" id="btn">Click me</button>
        </div>
    </main>

    <script src="hex.js"></script>
</body>

</html>

Ответы [ 2 ]

1 голос
/ 05 августа 2020

Одна проблема, с которой вы столкнулись, связана с вашим div, вы на самом деле имеете в виду два разных класса, у которых есть связанные анимации, поэтому второй переопределяет первый.

После удаления этого я очистил ваш код до упростить функцию changeColor. 

// Getting Elements

const button = document.getElementById("btn");
const color = document.querySelector(".color");
const background = document.querySelector("main");
const mainStyles = window.getComputedStyle(background);
let currentMainColor = mainStyles.getPropertyValue('background-color');;

// Event listners
button.addEventListener("click", changecolor);


function changecolor() {

    const newColor = `#${Math.floor(Math.random()*255**3).toString(16).padStart(6,0)}`;

    var style = document.querySelector("#style");
    if(style !== null){
       style.remove();
    }
    
    style = document.createElement('style');
    style.innerHTML =
            `@keyframes example1 {
        from {background-color : ${currentMainColor}}
        to {background-color: ${newColor};}}`
        style.id = "style";
    document.head.appendChild(style);

    currentMainColor = newColor;
    color.innerHTML = newColor;




}
*,
 ::after,
 ::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Roboto Mono", sans-serif;
}

html {
    height: 90vh;
}

body {
    font-family: "Roboto Mono", sans-serif;
    overflow: hidden;
}

nav {
    height: 3rem;
    display: flex;
    align-items: center;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
    z-index: 9999;
}

nav a {
    text-decoration: none;
}

.nav-container {
    width: 90vw;
    max-width: 620px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-container h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-right: 1rem;
    color: #49A6E9;
    letter-spacing: 0.25rem;
}

.nav-container ul {
    list-style: none;
    display: flex;
}

.nav-container ul li a {
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    margin-right: 1rem;
    color: hsl(205deg 86% 17%);
    letter-spacing: 0.25rem;
    transition: all 0.2s ease;
}

.nav-container ul li a:hover {
    color: #49A6E9;
}

main {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #F1F5F8;
    z-index: -1;
}

.animation1 {
    animation-name: example1;
    animation-duration: 4s;
    animation-fill-mode: forwards;
}

.container {
    text-align: center;
}

.container h1 {
    background: #222222;
    color: #FFFFFF;
    padding: 1rem;
    width: 50rem;
    border-radius: 10px;
    margin-bottom: 2.5rem;
    font-size: 2.5rem;
}

.color {
    color: #49A6E9;
}

.btn {
    padding: 0.7rem 2rem;
    border: 3px solid #222222;
    border-radius: 7px;
    background-color: transparent;
    cursor: pointer;
}

.btn:focus {
    outline: none;
}

.btn-hero {
    font-size: 1.7rem;
    text-transform: uppercase;
    letter-spacing: 0.25rem;
    transition: all 0.3s linear;
}

.btn-hero:hover {
    color: #F1F5F8;
    background-color: #222222;
}
<nav>
        <div class="nav-container">
            <a href="index.html">
                <h4 class="brand-name">Color Flipper</h4>
            </a>
            <ul class="menu">
                <li><a href="index.html">Simple</a></li>
                <li>
                    <a href="hex.html">Hex</a>
                </li>
            </ul>
        </div>
    </nav>
    <main class="animation1 animation2">
        <div class="container">
            <h1>Background Color : <span class="color">#F1F5F8</span></h1>
            <button type="button" class="btn btn-hero" id="btn">Click me</button>
        </div>
    </main>
1 голос
/ 05 августа 2020

Вы можете плавно изменить его с помощью свойства css transition. Щелкните div, чтобы изменить его цвет. 

//https://stackoverflow.com/questions/1484506/random-color-generator
function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

document.getElementById("div").addEventListener("click", e => {
  e.target.style.backgroundColor = getRandomColor();
});
.colordiv {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
}
<div class="colordiv" id="div" style="background-color: lightgray"></div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...