php设置控件display效果,CSS中display实现淡入淡出过渡效果的实例

display实现淡入淡出过渡效果

Title

p {

position: relative;

}

input {/*按钮样式*/

cursor: pointer;

border: none;

outline: none;

background: #34BC9D;

color: #fff;

height: 40px;

}

img {

position: absolute;

transition: 1s;

left: 0;

top: 100%;

opacity: 0;

cursor: pointer;

display: none;

}

var root = document.getElementById("root");

var img = document.getElementById("img");

function show(){

if(root.value === "点击显示图片"){

root.value = "点击隐藏图片";

/*设置setTimeout，让display先执行，opacity后执行*/

img.style.display = "block";

setTimeout(function () {

img.style.opacity = 1;

},.1);

}else{

root.value = "点击显示图片";

img.style.opacity = 0;

/*隐藏需要先执行opacity，再执行display，否则无效*/

setTimeout(function () {

img.style.display = "none";

},900);

}

}