盒子动态切换显示隐藏添加过渡动画效果

要实现盒子动态切换显示隐藏并添加过渡动画效果，可以使用CSS3的transition属性和JavaScript来实现。以下是一些实现步骤：

1. 首先，在CSS中给盒子添加过渡效果，如下所示：

.box {
    transition: all 0.3s ease;
}

这里的all表示所有属性都要添加过渡效果，0.3s表示过渡时间为0.3秒，ease表示过渡效果为缓入缓出。

2. 在JavaScript中获取需要切换显示隐藏的盒子元素，并给它添加一个点击事件：

var box = document.querySelector('.box');
box.addEventListener('click', function() {
    // 切换显示隐藏的代码
});

3. 在点击事件中，通过判断当前盒子的状态来切换显示和隐藏，并添加过渡效果：

var box = document.querySelector('.box');
box.addEventListener('click', function() {
    if (box.classList.contains('show')) {
        box.classList.remove('show');
        box.classList.add('hide');
    } else {
        box.classList.remove('hide');
        box.classList.add('show');
    }
});

这里使用了classList属性来添加和移除类名，show和hide是两个自定义的类名，用来表示盒子的显示和隐藏状态。

4. 最后，在CSS中定义show和hide类的样式，如下所示：

.box.show {
    opacity: 1;
    visibility: visible;
}

.box.hide {
    opacity: 0;
    visibility: hidden;
}

这里使用opacity和visibility属性来实现过渡效果，opacity表示透明度，visibility表示可见性。同时，注意要给.box元素设置一个初始状态，比如：

.box {
    opacity: 0;
    visibility: hidden;
}

这样就可以实现盒子动态切换显示隐藏并添加过渡动画效果了。