Vue inserta, actualiza o se elimina cuando el DOM, la aplicación proporciona un número de diferentes formas de efectos de transición.
- Single-elemento / transición conjunto
- transición css
- animación CSS
- animate.css combinado Biblioteca Animación
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
.kerwinfade-enter-active,
.kerwinfade-leave-active {
transition: all 1.5s;
}
.kerwinfade-enter,
.kerwinfade-leave-to {
opacity: 0;
transform: translateX(100px);
}
.kerwinbounce-enter-active {
animation: bounce-in .5s;
}
.kerwinbounce-leave-active {
animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
0% {
opacity: 0;
transform: translateX(100px);
}
100% {
opacity: 1;
transform: translateX(0px);
}
}
</style>
</head>
<body>
<div id="box">
<button @click="isShow=!isShow">click</button>
<transition name="kerwinfade">
<div v-if="isShow">1111111111111</div>
</transition>
<transition name="kerwinbounce">
<div v-if="isShow">222222222</div>
</transition>
</div>
<script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: "#box",
data: {
isShow: false
}
})
</script>
</body>
</html>
