文章目录
P14Vue3过渡&动画实现
过渡动画的使用
<template>
<button @click="isShow = !isShow">显示/隐藏</button>
<transition name="why">
<h2 v-if="isShow">{
{ message }}</h2>
</transition>
</template>
<script>
export default {
data() {
return {
isShow: true,
message: "Hello World!",
};
},
};
</script>
<style scoped>
.why-enter-from,
.why-leave-to {
opacity: 0;
}
.why-enter-to,
.why-leave-from {
opacity: 1;
}
.why-enter-active,
.why-leave-active {
transition: opacity 2s ease;
}
</style>
过渡CSS动画效果
<template>
<div class="app">
<button @click="isShow = !isShow">显示/隐藏</button>
<transition name="why">
<h2 v-if="isShow">{
{ message }}</h2>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
isShow: true,
message: "Hello World!",
};
},
};
</script>
<style scoped>
.app {
width: 200px;
margin: 0 auto;
}
.why-enter-active {
animation: bounce 1s ease;
}
.why-leave-active {
animation: bounce 1s ease reverse;
}
@keyframes bounce {
0% {
transform: scale(0);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
</style>
同时设置过渡和动画
mode和appear
animate.css
gsap
gsap实现数字变化
<template>
<input type="number" step="200" v-model="counter" />
<h2>{
{ counter }}</h2>
<h2>当前计数： {
{ showCounter }}</h2>
</template>
<script>
import gsap from "gsap";
export default {
data() {
return {
counter: 0,
showNumber: 0,
};
},
computed: {
showCounter() {
return this.showNumber.toFixed(0);
},
},
watch: {
counter(newValue) {
gsap.to(this, {
duration: 1, showNumber: newValue });
},
},
};
</script>
认识列表的过渡
列表过渡的移动动画
<template>
<button @click="addNum">添加数字</button>
<button @click="removeNum">删除数字</button>
<button @click="shuffleNum">数字洗牌</button>
<transition-group tag="p" name="why">
<span class="item" v-for="item in nums" :key="item">{
{ item }}</span>
</transition-group>
</template>
<script>
import _ from "loadsh";
export default {
data() {
return {
nums: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
counter: 10,
};
},
methods: {
addNum() {
this.nums.splice(this.randomIndex(), 0, this.counter++);
},
removeNum() {
this.nums.splice(this.randomIndex(), 1);
},
shuffleNum() {
this.nums = _.shuffle(this.nums);
},
randomIndex() {
return Math.floor(Math.random() * this.nums.length);
},
},
};
</script>
<style scoped>
.item {
margin-right: 10px;
display: inline-block;
}
.why-enter-from,
.why-leave-to {
opacity: 0;
transform: translateY(30px);
}
.why-enter-active,
.why-leave-active {
transition: all 1s ease;
}
.why-leave-active {
position: absolute;
}
.why-move {
transition: transform;
}
</style>
列表的交错过渡案例
<template>
<input v-model="keyword" />
<transition-group
tag="ul"
name="why"
:css="false"
@before-enter="beforeEnter"
@enter="enter"
@leave="leave"
>
<li v-for="(item, index) in showNames" :key="item" :data-index="index">
{
{ item }}
</li>
</transition-group>
</template>
<script>
import gsap from "gsap";
export default {
data() {
return {
keyword: "",
names: ["abc", "cba", "nba", "zhu", "zhou", "james", "kris", "shixun"],
};
},
computed: {
showNames() {
return this.names.filter((item) => item.indexOf(this.keyword) !== -1);
},
},
methods: {
beforeEnter(el) {
el.style.opacity = 0;
el.style.height = 0;
},
enter(el, done) {
gsap.to(el, {
opacity: 1,
height: "1.5em",
delay: el.dataset.index * 0.5,
onComplete: done,
});
},
leave(el, done) {
gsap.to(el, {
opacity: 0,
height: 0,
onComplete: done,
});
},
},
};
</script>
<style scoped></style>