Question

我试图让一个盒子生长，褪色，变蓝色，并根据按下的按钮进行重置。到目前为止，颜色的改变和重置是可行的;褪色和增长导致我的盒子消失了。

当单击时，如何使框在单击时褪色，同时保持与当前相同的颜色，而在保留当前颜色的情况下增长呢？

代码：

<!DOCTYPE html>
<html>
<head>
<title>Jiggle Into JavaScript</title>

<style> 
body  {margin:25px}
#resetDiv {height:150px;width:150px; background-color:orange;}

#blueDiv {height:150px;width:150px; background-color:blue;}

#fadeDiv {width:150px;height:150px;background-color:orange;opacity:0.75;}

#growDiv {height:150%;width:150%;background-color:orange}

</style>

</head>
<body>

<button onclick="grow()">
    Grow
</button>


<button onclick="blue()">
    Blue
</button>


<button onclick="fade()">
    Fade
</button>



<button onclick="reset()">
    Reset
</button>



<div id="blueDiv">
</div>
<script>
var div = document.getElementById("blueDiv");

function blue() {
    div.setAttribute("id", "blueDiv");}

function reset() {
    div.setAttribute("id", "resetDiv");}

function fade() {
    div.setAttribute("id", "fadeDiv");}
function grow() {
      div.setAttribute("id", "growDiv")
}        
    </script>
</body>
</html>

Answer 1

对于淡入，您可以在元素上添加淡入类（单击按钮时）。

这是相关的CSS：

.fade-in {
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 2s;
}

@keyframes fadeInOpacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

对于增长，您可以添加增长类：

.grow {
    transform: scale(1.5);
}

因此您可以声明它：

const myDiv = document.getElementById('myDiv'); // get the element

function grow() { // add grow to class list
  myDiv.classList.add("grow");
}

// add fade-in and remove it after 2 seconds
// 2 sseconds are the seconds of fade-it to get completed.
function fade() {
  myDiv.classList.add("fade-in");
  setTimeout(function(){myDiv.classList.remove("fade-in");}, 2000);
}

function blue() {
    myDiv.classList.add("blue");
}

function reset() { // reset the class list
    myDiv.classList = [];
}

这是有效的jsfiddle

渐渐淡出onclick

1 个答案: