需求实战一
样式展示
代码展示
<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>代码解读
这段代码是一个Vue组件，实现了一个渐入效果的过渡动画。下面是对代码的解读：
1. <template> 标签中定义了组件的模板结构。
2. <transition> 标签用于包裹需要过渡的元素，通过 name 属性指定过渡效果的名称为 "fade-in"，并设置 appear 属性为 true，表示组件初次渲染时也会触发过渡效果。
3. <ARow> 和 <ACol> 是自定义的组件，用于布局。
4. <div class="info-card"> 是一个信息卡片的容器。
5. <div class="info-title"> 显示信息的标题。
6. <div class="info-value"> 显示信息的数值。
7. v-if="show" 表示只有当 show 的值为 true 时，才会渲染 <ARow> 组件及其子组件，从而触发过渡效果。
8. <script setup> 标签中使用了 Vue 3 的新特性，通过 ref 创建了一个响应式的变量 show，初始值为 false。
9. setTimeout 函数用于在1秒后将 show 的值设置为 true，从而触发过渡效果。
10. <style scoped> 标签中定义了组件的样式，其中 .fade-in-enter-active 是过渡效果的关键帧动画，实现了渐入效果。
11. .info-card、.info-title 和 .info-value 是信息卡片的样式。
这段代码实现了一个简单的渐入效果的过渡动画，通过控制 show 的值来触发过渡效果的显示
需求实战二
样式展示
代码展示
<template>
<ARow>
<ACol>
<div class="info-card" :class="{ 'blinds-transition': showBlinds }">
<div class="info-title">
数据总和
</div>
<div class="info-value">
100
</div>
</div>
</ACol>
</ARow>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
const showBlinds = ref(false);
onMounted(() => {
showBlinds.value = true;
});
</script>
<style scoped>
:deep(.info-card){
width: 318px;
height: 116px;
background-color: #bebebe;
box-shadow: 0px 2px 10px 1px rgba(23,179,163,0.07);
border-radius: 4px;
overflow: hidden;
position: relative;
}
:deep(.info-card.slide-out) {
height: 0;
}
:deep(.info-title){
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #333333;
line-height: 21px;
padding:20px 0 20px 30px;
}
:deep(.info-value){
font-size: 36px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #333333;
line-height: 21px;
padding:0 0 0 30px;
}
.blinds-transition {
animation: blinds 1s ease-in-out forwards;
}
@keyframes blinds {
0% {
height: 0;
}
100% {
height: 116px;
}
}
</style>代码解读
这段代码是一个Vue组件的模板部分，用于展示一个信息卡片。具体解读如下：
1. 在模板中，使用了<ARow>和<ACol>组件来创建一个行列布局，将信息卡片放置在列中。
2. 信息卡片使用了一个<div>元素，并添加了一个名为info-card的类。通过:class绑定，可以根据showBlinds的值来动态添加blinds-transition类，实现卡片的动画效果。
3. 卡片内部包含了一个标题和一个数值，分别使用info-title和info-value类进行样式设置。
4. 在<script setup>中，引入了Vue的ref和onMounted函数。showBlinds是一个响应式的变量，初始值为false。在组件挂载后，通过onMounted钩子函数，将showBlinds的值设置为true，从而触发动画效果。
5. 在<style scoped>中，使用:deep()选择器来设置卡片的样式。其中，.info-card表示卡片的样式，.info-card.slide-out表示卡片收起时的样式。
6. blinds-transition类使用了CSS动画blinds，在1秒的时间内，将卡片的高度从0过渡到116px，实现展开的效果。
这段代码可以用于展示一个数据总和的信息卡片，并通过动画效果使卡片在页面加载后逐渐展开显示。
需求实战三
样式展示
代码展示
<template>
<ARow>
<ACol >
<div class="info-card">
<div class="info-title">
数据总和
</div>
<div class="info-value">
100
</div>
</div>
</ACol>
</ARow>
</template>
<script setup lang="ts">
</script>
<style scoped>
:deep(.info-card) {
width: 318px;
height: 116px;
background-color: #bebebe;
box-shadow: 0px 2px 10px 1px rgba(23, 179, 163, 0.07);
border-radius: 4px;
animation: shake 1s ease-in-out infinite;
transition: transform 0.5s ease-in-out;
}
@keyframes shake {
0% {
transform: rotate(0deg);
}
10% {
transform: rotate(20deg);
}
20% {
transform: rotate(40deg);
}
30% {
transform: rotate(20deg);
}
40% {
transform: rotate(-30deg);
}
100% {
transform: translateY(800px);
}
}
:deep(.info-title) {
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #333333;
line-height: 21px;
padding: 20px 0 20px 30px;
}
:deep(.info-value) {
font-size: 36px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #333333;
line-height: 21px;
padding: 0 0 0 30px;
}
:deep(.info-card.exit) {
transform: translateY(200px);
}
</style>代码解读
这段代码是一个Vue组件的模板部分，用于展示一个信息卡片。具体解读如下：
- 在<template>标签中，定义了一个ARow组件，表示一个行容器。
- 在<ARow>标签中，定义了一个ACol组件，表示一个列容器。
- 在<ACol>标签中，定义了一个div元素，具有info-card类名，表示一个信息卡片。
- 在<div class="info-card">中，包含了两个子元素：
- 一个具有info-title类名的div元素，用于显示信息标题。
- 一个具有info-value类名的div元素，用于显示信息值。
- 在<script>标签中，暂时没有任何代码。
- 在<style>标签中，定义了一些样式规则：
- .info-card类选择器表示选择所有具有info-card类名的元素，设置了宽度、高度、背景颜色、阴影、边框圆角、动画和过渡效果。
- @keyframes shake表示定义了一个名为shake的关键帧动画，实现了一个卡片抖动的效果。
- .info-title类选择器表示选择所有具有info-title类名的元素，设置了字体大小、字体样式、颜色、行高和内边距。
- .info-value类选择器表示选择所有具有info-value类名的元素，设置了字体大小、字体样式、颜色、行高和内边距。
- .info-card.exit类选择器表示选择所有具有info-card和exit类名的元素，设置了一个向下平移的动画效果。
这段代码的作用是展示一个带有坠落效果的信息卡片，其中包含一个标题和一个数值。
需求实战四
样式展示
代码展示
<template>
<ARow>
<ACol>
<div class="info-card" :class="{ 'fade-out': isFadeOut }">
<div class="info-title">
数据总和
</div>
<div class="info-value">
100
</div>
</div>
</ACol>
</ARow>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
const isFadeOut = ref(false);
onMounted(() => {
setTimeout(() => {
isFadeOut.value = true;
}, 2000);
});
</script>
<style scoped>
.info-card {
width: 318px;
height: 116px;
background-color: #bebebe;
box-shadow: 0px 2px 10px 1px rgba(23, 179, 163, 0.07);
border-radius: 4px;
transition: opacity 0.5s ease;
}
.fade-out {
opacity: 0;
}
.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>代码解读
这段代码是一个Vue组件的模板部分，用于展示一个带有淡出效果的信息卡片。具体解读如下：
- 在<template>标签中，定义了一个ARow组件，表示一个行容器。
- 在<ARow>标签中，定义了一个ACol组件，表示一个列容器。
- 在<ACol>标签中，定义了一个div元素，具有info-card类名，并使用了动态类绑定fade-out，根据isFadeOut的值来决定是否添加fade-out类名。
- 在<div class="info-card">中，包含了两个子元素：
- 一个具有info-title类名的div元素，用于显示信息标题。
- 一个具有info-value类名的div元素，用于显示信息值。
- 在<script>标签中，使用了Vue的ref和onMounted函数：
- isFadeOut是一个响应式引用，初始值为false。
- onMounted函数在组件挂载后执行，通过setTimeout函数延迟2秒后将isFadeOut的值设置为true，从而触发淡出效果。
- 在<style>标签中，定义了一些样式规则：
- .info-card类选择器表示选择所有具有info-card类名的元素，设置了宽度、高度、背景颜色、阴影和边框圆角，以及一个过渡效果。
- .fade-out类选择器表示选择所有具有fade-out类名的元素，设置了透明度为0，实现了淡出效果。
- .info-title类选择器表示选择所有具有info-title类名的元素，设置了字体大小、字体样式、颜色、行高和内边距。
- .info-value类选择器表示选择所有具有info-value类名的元素，设置了字体大小、字体样式、颜色、行高和内边距。
这段代码的作用是展示一个带有淡出效果的信息卡片，并在组件挂载后延迟2秒触发淡出效果。
需求实战五
样式展示
代码展示
<template>
<ARow :class="{ 'erased': isErased }">
<ACol>
<div class="info-card" >
<div class="info-title">
数据总和
</div>
<div class="info-value">
100
</div>
</div>
</ACol>
</ARow>
<br>
<ARow style="padding:20px 0 0 0">
<ACol>
<div class="info-card" :class="{ 'erased': isErased }">
<div class="info-title">
数据总和
</div>
<div class="info-value">
100
</div>
</div>
</ACol>
</ARow>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
const isErased = ref(false);
onMounted(() => {
setTimeout(() => {
isErased.value = true;
}, 2000);
});
</script>
<style scoped>
.info-card {
width: 318px;
height: 116px;
background-color: #bebebe;
box-shadow: 0px 2px 10px 1px rgba(23, 179, 163, 0.07);
border-radius: 4px;
position: relative;
overflow: hidden;
}
.erased:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #ffffff;
animation: erase 5s linear forwards infinite;
}
@keyframes erase {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
.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>代码解读
这段代码是一个Vue组件模板，用于展示一个信息卡片。代码中使用了Vue的响应式数据和动态类绑定。
首先，在模板中定义了两个信息卡片，分别位于两个<ARow>和<ACol>组件中。每个信息卡片都有一个标题和一个数值。
在<script setup>部分，使用了Vue的ref函数创建了一个名为isErased的响应式数据，默认值为false。然后，在onMounted生命周期钩子中，通过setTimeout函数将isErased的值设置为true，即2秒后将信息卡片擦除。
在<style scoped>部分，定义了信息卡片的样式。.info-card类设置了卡片的宽度、高度、背景颜色、阴影和圆角等样式。.erased:after伪类定义了擦除效果的动画，通过transform属性实现了从左侧滑入的效果。.info-title和.info-value类分别定义了标题和数值的样式。
总的来说，这段代码实现了一个信息卡片的展示，并在2秒后通过动画将卡片擦除的效果。你可以根据这段代码的思路，写一篇关于Vue组件开发和动态类绑定的博客。
需求实战六
样式展示
代码展示
<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 0.5s;
}
@keyframes fade-in {
0% {
transform: translateX(-200px) translateY(-200px);
}
20% {
transform: translateX(-160px) translateY(-100px);
}
30% {
transform: translateX(-120px) translateY(-140px);
}
40% {
transform: translateX(-80px) translateY(-180px);
}
50% {
transform: translateX(-60px) translateY(-150px);
}
60% {
transform: translateX(-40px) translateY(-80px);
}
70% {
transform: translateX(-20px) translateY(-120px);
}
80% {
transform: translateX(-6px) translateY(-70px);
}
90% {
transform: translateX(-3px) translateY(-40px);
}
100% {
transform: translateX(0px) translateY(0px);
}
}
.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>代码解读
这段代码是一个Vue组件，实现了一个渐入效果的过渡动画。下面是对代码的解读：
1. <template> 标签中定义了组件的模板结构。
2. <transition> 标签用于包裹需要过渡的元素，通过 name 属性指定过渡效果的名称为 "fade-in"，并设置 appear 属性为 true，表示组件初次渲染时也会触发过渡效果。
3. <ARow> 和 <ACol> 是自定义的组件，用于布局。
4. <div class="info-card"> 是一个信息卡片的容器。
5. <div class="info-title"> 显示信息的标题。
6. <div class="info-value"> 显示信息的数值。
7. v-if="show" 表示只有当 show 的值为 true 时，才会渲染 <ARow> 组件及其子组件，从而触发过渡效果。
8. <script setup> 标签中使用了 Vue 3 的新特性，通过 ref 创建了一个名为 show 的响应式数据，并将其初始值设置为 false。
9. setTimeout 函数用于在一定时间后将 show 的值设置为 true，从而触发过渡效果。
10. <style scoped> 标签中定义了组件的样式，其中 .fade-in-enter-active 是过渡效果的关键帧动画，通过 transform 属性实现了元素的平移效果。
11. .info-card、.info-title 和 .info-value 是信息卡片的样式。
这段代码实现了一个简单的弹跳效果的过渡动画，通过控制 show 的值来触发过渡效果，使信息卡片从左上角渐渐移动到指定位置。
标签：实战,info,Vue,卡片,样式,transform,height,font,card From： https://www.cnblogs.com/yyyyfly1/p/17626535.html