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

需求实战二

样式展示

代码展示

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