javascript - Anime.js backgroundColor giving unexpected results

So I've been playing around with Anime.js. I'm using this short bit of code to try and animate a div tag with a single letter id of a.

anime({
    targets: "#a",
    translateX: 250,
    color: "#fff",
    backgroundColor: "hsl(200, 50%, 50%)",
    loop: true,
    direction: 'alternate',
    easing: 'easeInOutQuad'
});

The problem is that (at least for me in Google Chrome) the element seems to start out at the beginning of the animation with a css background-color of black, even though it doesn't have any background color specifically set in the css. A bit of digging seems to suggest that the default background color of the element is rgba(0,0,0,0) and that Anime.js doesn't seem to work when using colors with alpha channels. I think this explains why the animation starts with black. Setting a background color for the element in the css seems to solve the issue, even if it has an alpha channel, but the alpha channel is never honored in the animation.

But what if I want to animate from a background color of rgba(0,0,0,0) to a solid color? A Google search does not reveal much information since Anime.js is fairly new. Does anybody know of any way that I can make this work in Anime.js? If Anime.js doesn't support this functionality, does anyone know of another JavaScript animation library that does? I need support for animating colors with alpha channels.

For convenience, here's a demo of what I've slapped together so far in a quick CodePen.

So I've been playing around with Anime.js. I'm using this short bit of code to try and animate a div tag with a single letter id of a.

anime({
    targets: "#a",
    translateX: 250,
    color: "#fff",
    backgroundColor: "hsl(200, 50%, 50%)",
    loop: true,
    direction: 'alternate',
    easing: 'easeInOutQuad'
});

For convenience, here's a demo of what I've slapped together so far in a quick CodePen.

Share Improve this question asked Jun 4, 2017 at 5:34 Aaron Beaudoin 1,1471 gold badge11 silver badges25 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 4

Late answer, but I am currently playing with anime.js and found your question. You can define a start value for the background animation.

$(document).ready(function() {
  anime({
    targets: ".box",
    translateX: 250,
    color: "#fff",
    backgroundColor: ["hsl(250, 75%, 50%)", "hsl(200, 50%, 50%)"],
    loop: true,
    direction: 'alternate',
    easing: 'easeInOutQuad'
  });
});

div {
  width: 20px;
  height: 20px;
  background: red;
  position: relative;
  left: 0;
}

<!DOCTYPE html>
<html>

  <head>
    <script data-require="[email protected]" data-semver="2.2.4" src="https://ajax.googleapis./ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare./ajax/libs/animejs/2.2.0/anime.js"></script>
    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <h1>Anime.js animate Background Color</h1>
    <div class="box"></div>
  </body>

</html>

It is unclear to me whether anime.js supports opacity. You can however user JQuery animate, with JQuery UI installed.

$('#a').animate({ 'background-color': 'rgba(0, 0, 0, 0.7)' },1000);

You can see the plete answer in How can I animate the opacity of the background of the div

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744750055a4591541.html

javascript - Anime.js backgroundColor giving unexpected results - Stack Overflow

2 Answers 2

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - Anime.js backgroundColor giving unexpected results - Stack Overflow

2 Answers 2

相关推荐