<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
<script src="../lib/js/vue.js"></script>
<style>
li{
border: 1px dashed black;
margin: 5px;
line-height: 35px;
padding-left: 5px;
font-size: 12px;
}
li:hover{
background-color: #1b6d85;
transition: all 0.5s;
}
.v-enter,
.v-leave-to{
opacity: 0;
transform: translateY(80px);
}
.v-enter-active,
.v-leave-active{
transition: all 0.8s linear;
}
/* .v-move 和 .v-leave-active 配合使用，能够实现列表后续的元素，渐渐地飘上来的效果*/
.v-move{
transition: all 0.5s linear;
}
.v-leave-active{
position: absolute;
}
</style>
</head>
<body>
<div ></html>
