前端基础之动画效果
简单的入场与出场
<template>
<div>
<button @click="isShow=!isShow">显示/隐藏</button>
<transition name="hello" appear><!-- appear设置打开界面就播放动画-->
<h1 v-show="isShow" >hello</h1>
</transition>
</div>
</template>
<script>
export default {
name:'Test',
data(){
return{
isShow:true
}
}
}
</script>
<style scoped>
h1{
background-color: orange;
}
.hello-enter-active{ /* 进入的动画 */
animation: atguigu 0.5s ;
}
.hello-leave-active{ /*退出的动画 */
animation: atguigu 0.5s ;
}
@keyframes atguigu {
from{
transform: translateX(-100px);
}
to{
transform: translateX(0px);
}
}
</style>
<<QQ20241012-23644.mp4>>
过度效果
<template>
<div>
<button @click="isShow=!isShow">显示/隐藏</button>
<transition name="hello" appear><!-- appear设置打开界面就播放动画-->
<h1 v-show="isShow" >hello2</h1>
</transition>
</div>
</template>
<script>
export default {
name:'Test',
data(){
return{
isShow:true
}
}
}
</script>
<style scoped>
h1{
background-color: orange;
}
.hello-enter-active,.hello-leave-active{ /* 进入过程和退出过程 */
transition: 0.5s linear;
}
.hello-enter,.hello-leave-to{ /* 进入的起点与离开的终点 */
transform: translateX(-100%);
}
.hello-enter-to ,.hello-leave{ /*进入的终点与离开的起点*/
transform: translateX(0);
}
</style>
实现的动画效果与上面的一致
集成第三方库
1.首先需要进行下载
npm install animate.css --save
2.标签中的name设置为
"animate__animated animate__bounce"
在Animate.css | A cross-browser library of CSS animations.
中找到合适的动画的名称，进入复制
<template>
<div>
<button @click="isShow = !isShow">显示/隐藏</button>
<transition
name="animate__animated animate__bounce"
appear
enter-active-class="animate__swing"
leave-active-class="animate__backOutUp">
<h1 v-show="isShow">hello3</h1>
</transition>
</div>
</template>
<script>
import 'animate.css'; // 确保 animate.css 已经被正确导入
export default {
name: 'Test',
data() {
return {
isShow: true
}
}
}
</script>
<style scoped>
h1 {
background-color: orange;
}
</style>
<<QQ20241013-152021.mp4>>