【技术积累】Vue.js中的CSS过渡【一】
CSS过渡是什么
在Vue中,可以使用<transition>组件来实现CSS过渡效果。CSS过渡是指在元素的状态发生改变时,通过添加或移除CSS类来实现平滑的过渡效果。
<transition>组件可以包裹需要过渡的元素,并通过name属性指定过渡效果的名称。然后,可以使用CSS样式来定义过渡的效果。
以下是一个简单的例子:
<template>
<transition name="fade-in" appear>
<ARow v-if="show">
<ACol>
<div class="info-card">
<div class="info-title">
数据总和
</div>
<div class="info-value">
100
</div>
</div>
</ACol>
</ARow>
</transition>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const show = ref(false);
// 在需要的时候触发过渡效果
setTimeout(() => {
show.value = true;
}, 1000);
</script>
<style scoped>
.fade-in-enter-active {
animation: fade-in 1s;
}
@keyframes fade-in {
from {
opacity: 0;
transform: translateX(-100px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.info-card {
width: 318px;
height: 116px;
background-color: #bebebe;
box-shadow: 0px 2px 10px 1px rgba(23,179,163,0.07);
border-radius: 4px;
}
.info-title {
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #333333;
line-height: 21px;
padding: 20px 0 20px 30px;
}
.info-value {
font-size: 36px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #333333;
line-height: 21px;
padding: 0 0 0 30px;
}
</style>
这段代码实现了一个简单的渐入效果的过渡动画,通过控制 show 的值来触发过渡效果的显示
在CSS中,.fade-enter-active和.fade-leave-active类定义了过渡的持续时间和动画效果。.fade-enter和.fade-leave-to类定义了元素进入和离开时的初始和最终状态。
通过使用<transition>组件和CSS样式,可以实现各种过渡效果,如淡入淡出、滑动、缩放等。可以根据具体需求来定义不同的过渡效果。
在黑夜里梦想着光,心中覆盖悲伤,在悲伤里忍受孤独,空守一丝温暖。
我的泪水是无底深海,对你的爱已无言,相信无尽的力量,那是真爱永在。
我的信仰是无底深海,澎湃着心中火焰,燃烧无尽的力量,那是忠诚永在。