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

热门相关:洪荒二郎传   豪门情变,渣总裁滚远点!   豪门情变,渣总裁滚远点!   拒嫁豪门,前妻太抢手   本法官萌萌哒