162 lines
3.1 KiB
HTML
162 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<style>
|
|
/* @keyframes leftToRight {
|
|
0% {
|
|
transform: translateX(-100px);
|
|
}
|
|
50% {
|
|
transform: translateX(-50px);
|
|
}
|
|
0% {
|
|
transform: translateX(0px);
|
|
}
|
|
}
|
|
.animation {
|
|
animation: leftToRight 3s;
|
|
} */
|
|
/* .transition {
|
|
transition: 3s background-color ease;
|
|
}
|
|
|
|
.blue {
|
|
background:blue;
|
|
}
|
|
.green {
|
|
background:green;
|
|
} */
|
|
|
|
|
|
|
|
|
|
/* 出场过度 */
|
|
/* .v-enter-from {
|
|
opacity: 0;
|
|
}
|
|
.v-enter-active {
|
|
transition: opacity 3s ease-out;
|
|
}
|
|
.v-enter-to {
|
|
opacity: 1;
|
|
} */
|
|
|
|
|
|
/* 退场过度 */
|
|
/* .v-leave-from {
|
|
opacity: 1;
|
|
} */
|
|
/* .v-leave-active {
|
|
transition: opacity 3s ease-in;
|
|
}
|
|
.v-leave-to {
|
|
opacity: 0;
|
|
} */
|
|
|
|
|
|
|
|
@keyframes shake {
|
|
0% {
|
|
transform: translateX(-100px);
|
|
}
|
|
|
|
50% {
|
|
transform:translateX(-50px) ;
|
|
}
|
|
100% {
|
|
transform:translateX(50px) ;
|
|
}
|
|
}
|
|
.v-enter-active {
|
|
transition: opacity 3s ease-out;;
|
|
}
|
|
.v-enter-to {
|
|
opacity: 0;
|
|
}
|
|
.v-enter-active {
|
|
animation: shake 3s;
|
|
}
|
|
|
|
</style>
|
|
<title>Document</title>
|
|
<script src="https://unpkg.com/vue@next"></script>
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
|
|
<script>
|
|
|
|
|
|
//单纯过度
|
|
// const app = Vue.createApp({
|
|
// data(){
|
|
// return {
|
|
// animate:{
|
|
// transition:true,
|
|
// blue:true,
|
|
// green:false
|
|
|
|
// }
|
|
// }
|
|
// },
|
|
// methods:{
|
|
// handleClick(){
|
|
// this.animate.blue=!this.animate.blue;
|
|
// this.animate.green=!this.animate.green;
|
|
|
|
|
|
// }
|
|
// },
|
|
|
|
// template: `
|
|
// <div>
|
|
// <div :class="animate">hello Vue</div>
|
|
// <button @click="handleClick">切换</button>
|
|
// </div>
|
|
// `
|
|
|
|
|
|
// });
|
|
|
|
// const vm = app.mount('#root');
|
|
|
|
|
|
|
|
//出场动画与退场动画
|
|
//单元素,但组件的入场动画
|
|
const app = Vue.createApp({
|
|
data(){
|
|
return {
|
|
show:false
|
|
}
|
|
},
|
|
methods:{
|
|
handleClick(){
|
|
this.show=!this.show;
|
|
}
|
|
},
|
|
|
|
template: `
|
|
<div>
|
|
<transition>
|
|
<div v-if="show">hello Vue</div>
|
|
</transition>
|
|
|
|
<button @click="handleClick">切换</button>
|
|
</div>
|
|
`
|
|
|
|
|
|
});
|
|
|
|
const vm = app.mount('#root');
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html> |