我打算写一个popup弹窗，通过show参数控制，当show开关的时候有开启或者关闭的动画

好的，我来为你解答。

要实现这个功能，你可以使用CSS的transition属性和JavaScript来实现。

首先，在CSS中定义好你的弹窗样式，包括其宽度、高度、位置等等。然后，给弹窗添加一个transition属性，用来实现动画效果。例如：

.popup {
  width: 300px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease-out;
}

这里的transition属性表示所有属性都需要进行动画过渡，过渡时间为0.3秒，过渡效果为ease-out。

接下来，在JavaScript中获取到你的弹窗元素，并通过修改其样式来控制它的开关。例如：

const popup = document.querySelector('.popup');

function showPopup() {
  popup.style.display = 'block';
  setTimeout(() => {
    popup.classList.add('show');
  }, 0);
}

function hidePopup() {
  popup.classList.remove('show');
  setTimeout(() => {
    popup.style.display = 'none';
  }, 300);
}

这里的showPopup函数用来显示弹窗，首先将其display属性设置为block，然后通过添加一个show类来触发过渡效果。hidePopup函数则是用来隐藏弹窗，先移除show类，然后延迟0.3秒后将其display属性设置为none。

这样，当你调用showPopup和hidePopup函数时，就可以控制你的弹窗的开关和动画效果了。