<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="vue.js"></script>
<style>
.kerwin-enter-active{
animation: aaa 1.5s;
}
.kerwin-leave-active{
animation: aaa 1.5s reverse;
}
@keyframes aaa {
0%{
opacity: 0;
transform: translateX(100px);
}
100%{
opacity: 1;
transform: translateX(0px);
}
}
</style>
</head>
<body>
<div id="box">
<button @click="isShow=!isShow">change</button>
<!-- 第一种方法 -->
<transition enter-active-class="kerwin-enter-active";
leave-active-class="kerwin-leave-active">
<div v-show="isShow">11111</div>
</transition>
<!-- 第二种方法简写 -->
<!-- <transition name="kerwin">
<div v-show="isShow">22222</div>
</transition> -->
</div>
<script>
new Vue({
el:"#box",
data:{
isShow:false
}
})
</script>
</body>
</html>