深圳市企業(yè)網(wǎng)站建設(shè)價格/整合營銷理論主要是指
在 Vue 開發(fā)中，我們可以利用<transition>組件來打造各種令人驚艷的動畫效果。下面來詳細看看這些有趣的動畫效果及其實現(xiàn)代碼。
一、縮放類效果
zoom-in（整體放大進入）
<template><div><button @click="isShow =! isShow">顯示/隱藏</button><transition name="zoom-in"><h1 v-show="isShow">你好啊</h1></transition></div>
</template><script>
export default {name: 'Test',data() {return {isShow: true,};},
};
</script><style scoped>
.zoom-in-enter-active {animation: zoomIn 0.5s ease;
}@keyframes zoomIn {from {transform: scale(0);}to {transform: scale(1);}
}
</style>
zoom-in-left（從左側(cè)放大進入）
<template><div><button @click="isShow =! isShow">顯示/隱藏</button><transition name="zoom-in-left"><h1 v-show="isShow">你好啊</h1></transition></div>
</template><script>
export default {name: 'Test',data() {return {isShow: true,};},
};
</script><style scoped>
.zoom-in-left-enter-active {animation: zoomInLeft 0.5s ease;
}@keyframes zoomInLeft {from {transform: scale(0) translateX(-100%);}to {transform: scale(1) translateX(0);}
}
</style>
zoom-in-right（從右側(cè)放大進入）
<template><div><button @click="isShow =! isShow">顯示/隱藏</button><transition name="zoom-in-right"><h1 v-show="isShow">你好啊</h1></transition></div>
</template><script>
export default {name: 'Test',data() {return {isShow: true,};},
};
</script><style scoped>
.zoom-in-right-enter-active {animation: zoomInRight 0.5s ease;
}@keyframes zoomInRight {from {transform: scale(0) translateX(100%);}to {transform: scale(1) translateX(0);}
}
</style>
zoom-in-top（從頂部放大進入）
<template><div><button @click="isShow =! isShow">顯示/隱藏</button><transition name="zoom-in-top"><h1 v-show="isShow">你好啊</h1></transition></div>
</template><script>
export default {name: 'Test',data() {return {isShow: true,};},
};
</script><style scoped>
.zoom-in-top-enter-active {animation: zoomInTop 0.5s ease;
}@keyframes zoomInTop {from {transform: scale(0) translateY(-100%);}to {transform: scale(1) translateY(0);}
}
</style>
zoom-in-bottom（從底部放大進入）
<template><div><button @click="isShow =! isShow">顯示/隱藏</button><transition name="zoom-in-bottom"><h1 v-show="isShow">你好啊</h1></transition></div>
</template><script>
export default {name: 'Test',data() {return {isShow: true,};},
};
</script><style scoped>
.zoom-in-bottom-enter-active {animation: zoomInBottom 0.5s ease;
}@keyframes zoomInBottom {from {transform: scale(0) translateY(100%);}to {transform: scale(1) translateY(0);}
}
</style>
zoom-in-center-x（沿水平中心軸放大進入）
<template><div><button @click="isShow =! isShow">顯示/隱藏</button><transition name="zoom-in-center-x"><h1 v-show="isShow">你好啊</h1></transition></div>
</template><script>
export default {name: 'Test',data() {return {isShow: true,};},
};
</script><style scoped>
.zoom-in-center-x-enter-active {animation: zoomInCenterX 0.5s ease;
}@keyframes zoomInCenterX {from {transform: scaleX(0);}to {transform: scaleX(1);}
}
</style>
zoom-in-center-y（沿垂直中心軸放大進入）
<template><div><button @click="isShow =! isShow">顯示/隱藏</button><transition name="zoom-in-center-y"><h1 v-show="isShow">你好啊</h1></transition></div>
</template><script>
export default {name: 'Test',data() {return {isShow: true,};},
};
</script><style scoped>
.zoom-in-center-y-enter-active {animation: zoomInCenterY 0.5s ease;
}@keyframes zoomInCenterY {from {transform: scaleY(0);}to {transform: scaleY(1);}
}
</style>
二、滑動類效果
slide（普通滑動）
<template><div><button @click="isShow =! isShow">顯示/隱藏</button><transition name="slide"><h1 v-show="isShow">你好啊</h1></transition></div>
</template><script>
export default {name: 'Test',data() {return {isShow: true,};},
};
</script><style scoped>
.slide-enter-active {animation: slideIn 0.5s ease;
}@keyframes slideIn {from {transform: translateX(-100%);}to {transform: translateX(0);}
}
</style>
slide-left（向左滑動）
<template><div><button @click="isShow =! isShow">顯示/隱藏</button><transition name="slide-left"><h1 v-show="isShow">你好啊</h1></transition></div>
</template><script>
export default {name: 'Test',data() {return {isShow: true,};},
};
</script><style scoped>
.slide-left-enter-active {animation: slideLeftIn 0.5s ease;
}@keyframes slideLeftIn {from {transform: translateX(100%);}to {transform: translateX(0);}
}
</style>
- 向右滑動（slide-right）
<template><div><button @click="isShow =! isShow">顯示/隱藏</button><transition name="slide-right"><h1 v-show="isShow">你好啊</h1></transition></div>
</template><script>
export default {data() {return {isShow: false};}
};
</script><style scoped>
.slide-right-enter-active,
.slide-right-leave-active {transition: all 0.5s ease;
}.slide-right-enter,
.slide-right-leave-to {transform: translateX(-100%);
}
</style>
- 向上滑動（slide-top）
<template><div><button @click="isShow =! isShow">顯示/隱藏</button><transition name="slide-top"><h1 v-show="isShow">你好啊</h1></transition></div>
</template><script>
export default {data() {return {isShow: false};}
};
</script><style scoped>.slide-top-enter-active,.slide-top-leave-active {transition: all 0.5s ease;}.slide-top-enter,.slide-top-leave-to {transform: translateY(-100%);}
</style>
- 向下滑動（slide-bottom）
<template><div class="slide-bottom-animation" v-if="showBottom">向下滑動示例</div>
</template><script>
export default {data() {return {showBottom: false};}
};
</script><style scoped>.slide-bottom-enter-active,.slide-bottom-leave-active {transition: all 0.5s ease;}.slide-bottom-enter,.slide-bottom-leave-to {transform: translateY(100%);}</style>
三、淡入淡出效果
<template><div><button @click="isShow =! isShow">顯示/隱藏</button><transition name="fade-animation"><h1 v-show="isShow">你好啊</h1></transition></div>
</template><script>
export default {data() {return {isShow: true};}
};
</script><style scoped>
.fade-animation-enter-active,
.fade-animation-leave-active {transition: opacity 0.5s ease;
}.fade-animation-enter,
.fade-animation-leave-to {opacity: 0;
}
</style>