代码之家 › 专栏 › 技术社区 › Aurelian Spodarec

如何改变鼠标和鼠标的动画颜色?

javascript-events javascript

0

Aurelian Spodarec · 技术社区 · 6 年前

我正在构建一个主题切换程序,所以当你悬停某物时,它会改变颜色。

它起作用了。

现在,我想给它添加动画,我该怎么做呢?

我知道我需要一个能做到这一点的函数,但我不知道如何开始。

这是密码笔: https://codepen.io/Aurelian/pen/djYLxx?editors=0010

以下是HTML:

<div class="organic-body" data-color="#1f2f1e" style="background-color: rgb(31, 51, 34);">
<div class="container">

  <h5>Hover to change color</h5>

  <div class="organic-list">
  <a href="#" class="organic-card js-organic-card-hover" data-color="red">
    <h2>Color red</h2>
  </a>

  <a href="#" class="organic-card js-organic-card-hover" data-color="blue">
    <h2>Color blue</h2>
  </a>

  <a href="#" class="organic-card js-organic-card-hover" data-color="green">
    <h2>Color green</h2>
  </a>
  </div>

</div>
</div>

这是JS:

document.addEventListener('DOMContentLoaded', function () {

  // Select each item
  var organicBody = document.querySelector(".organic-body"),
      organicList = document.querySelector(".organic-list"),
      organicCard = document.querySelectorAll(".organic-card");

      organicCard.forEach(function(item) {
        item.addEventListener('mouseover', function(event) {
          var itemDataColor = item.getAttribute('data-color');
          organicBody.style.backgroundColor = itemDataColor;

        })
        item.addEventListener('mouseout', function(event) {
          var bodyColor = organicBody.getAttribute('data-color');
          organicBody.style.backgroundColor = bodyColor;
        });
      })


      // Set interval on how long you want it to animate
      // Convert color to RGB

      function animateColorChange() {

         setTimeout(function(){ 

         }, 3000);

      }

});

1 回复 | 直到 6 年前

1

user184994 6 年前

只需修改css以包含 transition 属性,例如:

.organic-body {
  height: 100vh;  
  transition: background-color 1000ms;
}

这意味着任何时候 background-color 性能变化,应逐渐过渡到1000ms以上

编辑

如果您真的必须使用js(我强烈建议您不要使用js),这大概是您需要做的

let frames = 60; // The number of frames. The lower the number, the choppier the transition
let duration = 1000; // How long the transition should take
let from = [255, 0, 0]; // RGB values
let to = [0, 0, 255]; // RGB values

// Calculate the differences between the two
let diff = to.map((v, idx) => v - from[idx]);
// Divide that by the number of frames to find out what change should be made in each frame
let frameChange = diff.map(v => v / frames);

let elem = document.getElementById('example');
let step = 1;


function tick() {
    from = from.map((v, idx) => v + frameChange[idx]);
    elem.style.backgroundColor = `rgb(${from[0]}, ${from[1]}, ${from[2]})`;
    step++;
    if (step <= frames) {
        setTimeout(tick, duration / frames)
    }
}

tick()

div#example {
  width: 100px;
  height: 100px;
  background-color: red;
}

<div id="example">
</div>