css3过渡从顶部top0px过渡到30px打开就开始过渡

可以使用如下的CSS代码实现：

div {
  position: relative;
  top: 0px; /* 初始位置 */
  transition: top 0.5s ease; /* 过渡效果，过渡时间0.5秒，缓动函数为ease */
}

div.open {
  top: 30px; /* 打开后的位置 */
}

然后在JavaScript中添加一个事件监听器，当用户点击某个元素时，将该元素的class属性改为open，从而触发过渡效果：

document.querySelector('button').addEventListener('click', function() {
  document.querySelector('div').classList.add('open');
});