照片转场在Web开发中是非常常见的效果，让用户能够以流畅的方式浏览网站内容，而Vue的过渡系统可以很好地完成这个任务，使得开发者可以轻松地为网站添加照片转场效果。

Vue提供了两种过渡方式，分别是CSS过渡和JavaScript过渡。在这里我们重点介绍CSS过渡。

CSS过渡是利用CSS动画来实现过渡效果，这需要为要过渡的元素添加一个transition属性，Vue的过渡系统会自动为这个属性添加合适的前缀。

/* 过渡效果 */
.fade-enter-active,
.fade-leave-active {
transition: opacity .5s
}
/* 进入 */
.fade-enter,
.fade-leave-to {
opacity: 0
}

上述代码为一个淡入淡出的过渡效果，在进入状态时，元素的opacity为0，在过渡时会逐渐变为1，离开时则是反过来。.fade-enter-active和.fade-leave-active是过渡时的状态，而.fade-enter和.fade-leave-to则是定义了离开和进入的状态。其中.fade-enter-active和.fade-leave-active必须定义相同的属性。

当Vue检测到元素需要过渡时，会自动为其添加一个与过渡名称相同的类名，例如fade-enter和fade-leave-to，这样在过渡结束后，过渡元素的样式会自动地清除。

在Vue中，可以将过渡效果应用到列表中的每个元素上，使得元素在被添加或删除时都能够具备过渡效果。

/*List Item 过渡*/
.list-item-enter-active,
.list-item-leave-active {
transition: all .5s;
}
.list-item-enter,
.list-item-leave-to {
opacity: 0;
transform: translateY(30px);
}

上述代码是一个列表项的过渡效果，当列表项被添加或删除时，会以淡入淡出和上下平移的方式过渡。

除了CSS过渡，Vue还提供了JavaScript过渡和Js动画两种方式，它们在一些自定义的动画效果的实现上更加方便，后续将会给大家进行详细讲解。