过渡和动画是可以通过同时作用在一个元素上的，我们来写一个过渡和动画并用的案例。
基础代码还是通过一个按钮控制isShow变量，来实现hello world显示和隐藏。
<script>
const App = Vue.createApp({
data() {
return {
message:'hello world!',
isShow:false
}
},
methods: {
handelClick(){
this.isShow = !this.isShow
}
},
template: `
<Transition>
<div v-if="isShow">{{message}}</div>
</Transition>
<button @click="handelClick">显示/隐藏</button>
`
})
const vm = App.mount("#app")
</script>接下来我们来写样式，我们声明了一个slideIn从右往左移动的动画，给它用在进入时的动画效果，然后在声明了一个slideOut从左往右移动的动画，给它用在离开时的动画效果。
最后我们添加过渡效果，进入时显示的由弱到强的显示效果，离开时是由强到弱的显示效果。
<style>
@keyframes slideIn {
to{
transform: translateX(0);
}
from{
transform: translateX(150px);
}
}
@keyframes slideOut{
to{
transform: translateX(150px);
}
from{
transform: translateX(0);
}
}
.v-enter-active{
animation: slideIn 2s ease;
transition: opacity 2s ease;
}
.v-leave-active{
animation: slideOut 2s ease;
transition: opacity 2s ease;
}
.v-leave-from,.v-enter-to{
opacity: 1;
}
.v-enter-from,.v-leave-to{
opacity: 0;
}
</style>这样就实现了一个 动画和过渡并用的效果。
过渡和动画时长不一致造成的问题
目前我们设置的过渡和动画时长都是一样的，运行效果看起来也没有什么问题，但是当我把时长调整成不一样的时候就会出现问题了。
我们把过渡的时长调整到7s,然后我们在运行观察，我们会发现在入场动画里面看不出太大的问题，但是在离场动画时发现动画已经执行完了 元素已经移到右边了，然后因为过渡效果还没有执行完，导致了元素又被拽回来继续执行过渡直到完成为止。
那么遇到这样的问题，我们可以给它设置 type 属性用来给它制定一个标准，告知vue那个效果执行完成就结束，我们可以可以给它设置 animation 或 transition
template: `
<Transition type="animation">
<div v-if="isShow">{{message}}</div>
</Transition>
<button @click="handelClick">显示/隐藏</button>
`这样设置之后，动画执行结束了就会直接退出不会再等过渡执行完成了，反之当我们把type设置成transition 它就会在过渡效果执行完了直接退出，不等动画执行完成。
使用属性控制动画和过渡市场
在<Transition>组件上我们可以使用duration属性来控制动画和过渡的时长，尽管我们css里面定义了时长，只要我们提供了duration属性，vue将会以这个时长为准。
template: `
<Transition :duration="500">
<div v-if="isShow">{{message}}</div>
</Transition>
<button @click="handelClick">显示/隐藏</button>
`无论动画或过渡是否执行执行结束，它都将会在duration指定时长内停止动画和过渡效果。
如果有必要的话，你也可以用对象的形式传入，分开指定进入和离开所需的时间
template: `
<Transition :duration="{ enter: 500, leave: 800 }">
<div v-if="isShow">{{message}}</div>
</Transition>
<button @click="handelClick">显示/隐藏</button>
`