- A+
需求实战一
样式展示
代码展示
<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 的值来触发过渡效果，使信息卡片从左上角渐渐移动到指定位置。
