问成长和褪色
EN

Stack Overflow用户

提问于 2018-11-08 01:50:59

回答 1查看 2.7K关注 0票数 0

我试着得到一个盒子生长，褪色，改变蓝色，并按下按钮复位。到目前为止，颜色的变化，并重新设置是有效的；褪色和增长的结果，我的盒子变色。

如何使框在单击时淡出，同时保持与当前相同的颜色，并在保留当前颜色的同时增长，当单击时。

代码：

<!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>

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-11-08 01:55:53

对于淡入，可以将淡入类添加到元素中(单击按钮时)。

这是相关的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，您可以添加grow类：

.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 = [];
}

这是一个工作的小提琴

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/53200458

复制

相似问题

问成长和褪色
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问成长和褪色EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问成长和褪色
EN