【技术实战】Vue功能样式实战【七】

  • 【技术实战】Vue功能样式实战【七】已关闭评论
  • 71 次浏览
  • A+
所属分类:Web前端
摘要

这段代码是一个Vue组件,实现了一个渐入效果的过渡动画。下面是对代码的解读:


需求实战一

样式展示

【技术实战】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 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 的值来触发过渡效果的显示

需求实战二

样式展示

【技术实战】Vue功能样式实战【七】

代码展示

<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,实现展开的效果。

这段代码可以用于展示一个数据总和的信息卡片,并通过动画效果使卡片在页面加载后逐渐展开显示。

需求实战三

样式展示

【技术实战】Vue功能样式实战【七】

代码展示

<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类名的元素,设置了一个向下平移的动画效果。

这段代码的作用是展示一个带有坠落效果的信息卡片,其中包含一个标题和一个数值。

需求实战四

样式展示

【技术实战】Vue功能样式实战【七】

代码展示

<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秒触发淡出效果。

需求实战五

样式展示

【技术实战】Vue功能样式实战【七】

代码展示

<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组件开发和动态类绑定的博客。 

需求实战六

样式展示

【技术实战】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 的值来触发过渡效果,使信息卡片从左上角渐渐移动到指定位置。