javascript - js的点击事件，用css3 transition做过渡，没有效果 如下代码

问题描述

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，从高度或宽度上来隐藏

你想要的是关闭聊天对话框的窗口动画效果？合并关闭或者右侧淡出，用框架吧，容易实现