时间戳

首页 > 解决方案 > 动画 JS，使用我在函数 scalebigger 中获得的值来更改 clickedI.name 不起作用

javascript - 动画 JS，使用我在函数 scalebigger 中获得的值来更改 clickedI.name 不起作用

问题描述

我是动画和 JS 的新手。第一个问题：如何使用我点击时的 Id 更新我“clickedI”的全局对象以了解单击了哪个框并稍后在我的anime.js时间轴中使用 Id
第二个问题什么是更好的方法获取单击对象的 ID（这是 7 个中的任何一个框，在程序执行之前我不知道哪个框）并在时间轴动画中使用它

HTML

<html lang="en">

<head>
  <link rel="stylesheet" href="style.css">
  <title>ColorRay</title>
</head>

<body>
  <!-- /Box -->
  <div id="boxes">
    <div class="box" id="red"></div>
    <div class="box" id="orange"></div>
    <div class="box" id="yellow"></div>
    <div class="box" id="green" onClick="reply_click(this.id)"></div>
    <div class="box" id="lightblue" onClick="reply_click(this.id)"></div>
    <div class="box" id="blue" onClick="reply_click(this.id)"></div>
    <div class="box" id="purple" onClick="reply_click(this.id)"></div>
  </div>
  <h1 id="pickaColor">Pick A Color</h1>
  <!-- /Box -->
  <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
  <script src="script.js"></script>
</body>

</html>

Javascript

var Appear = anime({
  targets: '#pickaColor',
  opacity: 1,
  scale: {
    value: 1.3,
    duration: 1600,
    delay: 800,
    easing: 'easeInOutQuart'
  },
  delay: 250,
  autoplay: true
});

/*
  ScaleBigger Animation
*/
var theParent = document.querySelector('#boxes');
theParent.addEventListener("click", scaleBigger, false);
var clickedItem;
var clickedItemId;

var clickedI = {
  id: 10,
  name: 'blue'
}
//I want this to be updated from the value I get in the function

function scaleBigger(e) {
  if (e.target !== e.currentTarget) {
    //this is not working to update the global variable
    clickedI.id = e.target.id;
    clickedI.name = document.getElementById(clickedI.id);
    document.getElementById(clickedI.id).style.transform = "scale(1.3)";
  }
  e.stopPropagation();
}
console.log(clickedI);

/*
  animate after the click with delay
*/
this.animate = anime.timeline({
  autoplay: false,
});
this.animate.add({
  targets: '.box',
  duration: 3000,
  delay: 1000,
})
  .add({
    targets: '#pickaColor',
    opacity: 0,
    scale: {
      value: 1,
      easing: 'easeOutExpo'
    },
    duration: 1000,
    delay: 1000,
  })
  .add({
    targets: '#' + clickedI.name,
    scale: {
      value: 1,
      easing: 'easeOutExpo'
    },
    translateY: -100,
    duration: 4000,
    delay: 1000,
  });

document.querySelector('#boxes').onclick = animate.play;

CSS

body {
  background: black;
  overflow: hidden;
  }
  #ce_input{
  background: black;
  border: none;
  }
  #pickaColor {
  color: white;
  text-align: center;
  font-family: monospace;
  padding-top: 30px;
  opacity: 0;
  }

  #boxes {
  width:80%;
  margin: auto;
  margin-top: 30px;
  text-align: center;
  }
  #boxes {
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.15)));
  }
  .box {
  position: relative;
  height: 150px;
  width: 85px;
  margin: 0.5px;
  display: inline-block;
  border-radius: 8%;
  }
  
  #red {
    background-image: linear-gradient(to bottom right, red, rgba(255, 0, 0, 0.705));
  }
  #orange {
    background-image: linear-gradient(to bottom right, rgb(236, 154, 0), rgba(236, 153, 0, 0.603));
  }
  #yellow {
    background-image: linear-gradient(to bottom right, rgb(236, 236, 6), rgba(255, 255, 0, 0.61));
  }
  #green {
    background-image: linear-gradient(to bottom right, rgb(9, 156, 9), rgba(9, 156, 9, 0.61));
  }
  #lightblue {
    background-image: linear-gradient(to bottom right, rgb(18, 223, 238), rgba(18, 223, 238, 0.342));
  }
  #blue { 
    background-image: linear-gradient(to bottom right, rgb(2, 2, 185), rgba(2, 2, 185, 0.616));
  } 
  #purple { 
    background-image: linear-gradient(to bottom right, #58028a, #58028a94);
  }

标签： javascripthtmlcssanimationglobal-variables

解决方案

推荐阅读