問題描述

html

<section id='dialog'> <p id='box'><p id='close'>x</p> </p> <p id='bg'></p></section><footer id='store-footer'> <p id='btn'>在線詢價</p> <p class='footer-item goin'>加入購物車</p> <p class='footer-item collect'>立即購買</p></footer>

css

#bg { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(7,17,27,0.5); z-index: 999; display: none; border-radius: 0.5rem; transition:all 2s; -moz-transition:all 2s; /* Firefox 4 */ -webkit-transition:all 2s; /* Safari and Chrome */ -o-transition:all 2s; /* Opera */}#box { position: fixed; width: 80%; height: 30%; top: 30%; left: 10%; display: block; margin: 0 auto; background-color: #fff; z-index: 1000; display: none; border-radius: 0.5rem; transition: 2s; -moz-transition: 2s; /* Firefox 4 */ -webkit-transition: 2s; /* Safari and Chrome */ -o-transition: 2s; /* Opera */}

js

<script> window.onload = function() {var box = document.getElementById('box');var bg = document.getElementById('bg');var btn = document.getElementById('btn');var close = document.getElementById('close');btn.onclick = function() { box.style.display = 'block'; bg.style.display = 'block';}close.onclick = function(){ box.style.display = 'none'; bg.style.display = 'none';} }</script>

問題解答

因為display是狀態屬性，也就是說，它的改變會導致從一個狀態直接跳到另外一個狀態，所以不存在漸變動畫。如果需要隱藏，建議使用opacity來做。opacity是控制透明度的屬性，當透明度為0時，元素就不可見了。

另外，提醒一下，你的#box樣式里寫了兩次display屬性。

你如果要用transition不妨不用display:none換成height:0或者width:0，從高度或寬度上來隱藏

你想要的是關閉聊天對話框的窗口動畫效果？合并關閉或者右側淡出，用框架吧，容易實現