動畫
<style>
@keyframes leftToRight {
50% {
transform: translate3d(200px,200px,0)
}
}
.animation{
animation: leftToRight 2s;
}
</style>
過渡
<style>
.transition{
transition:background-color 3s ease
}
.blue{
background-color: blue;
}
.green{
background-color: green;
}
</style>
<div id="root">
<div :class="animate">hello</div>
<button @click="change">切換</button>
</div>
const app = new Vue({
el: "#root",
data() {
return {
animate:{
transition: true,
blue:true,
green:false
}
}
},
methods: {
change(){
this.animate.blue = !this.animate.blue;
this.animate.green = !this.animate.green;
}
}
})
動畫案例
<!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 src="https://unpkg.com/[email protected]"></script>
<style>
@keyframes shakeEnter {
0%{
transform:translateX(-100px)
}
}
@keyframes shakeLeave {
100%{
transform:translateX(100px)
}
}
.v-enter-active{
animation: shakeEnter 2s ease-out;
transition: opacity 2s ease-out;
}
.v-leave-active{
animation: shakeLeave 2s ease-out;
transition: opacity 2s ease-out;
}
.v-enter-from,.v-leave-to{
opacity: 0;
}
body {
margin: 200px;
}
</style>
</head>
<body>
<div id="root">
<transition>
<div v-show="show">hello</div>
</transition>
<button @click="change">切換</button>
</div>
<script>
const app = Vue.createApp({
data() {
return {
show: false
}
},
methods: {
change() {
this.show = !this.show;
}
}
})
const vm = app.mount("#root");
</script>
</body>
</html>
v-enter-from 和v-leave-from 都是觸發過渡的一瞬間生效，然後下一幀就失效，過渡期間會給dom添加enter-active、enter-to或者leave-active、leave-to這個時候transition:all 1s ease-in; 就會起作用
不用css做動畫，而用js
案例：
<body>
<div id="root">
<transition :css="false"
@before-enter="handleBeforeEnter"
@enter="handleEnter"
@after-enter="handleEnterEnd"
>
<div v-show="show">hello</div>
</transition>
<button @click="change">切換</button>
</div>
<script>
const app = Vue.createApp({
data() {
return {
show: false
}
},
methods: {
change() {
this.show = !this.show;
},
handleBeforeEnter(el){
el.style.color = 'red'
},
handleEnter(el,done){
const timer = setInterval(()=>{
const color = el.style.color;
el.style.color = color === 'red' ? 'green' : 'red';
},1000)
setTimeout(()=>{
clearInterval(timer);
done(); //動畫結束
},3000)
},
handleEnterEnd(){
alert("動畫結束")
}
}
})
const vm = app.mount("#root");
</script>
</body>
</html>
當有兩個dom同時做動畫，要求先出去再進來時，可以寫mode
< transition mode=“out-in” appear> //appear是初次展示也要動畫
![vue項目：npm打包-S和-D差別：[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)