display实现淡入淡出过渡效果

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>div{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;}</style></head><body><div><inputid="root"type="button"onclick="show()"value="点击显示图片"><imgid="img"src="http://www.qianduanzhan.com/zb_users/upload/2017/07/201707161500184837405094.png"alt=""></div><script>varroot=document.getElementById("root");varimg=document.getElementById("img");functionshow(){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);}}</script></body></html>