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

转载作者：我是一只小鸟更新时间：2023-08-13 14:31:06

需求实战一

样式展示

代码展示

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

最后此篇关于【技术实战】Vue功能样式实战【七】的文章就讲到这里了,如果你想了解更多关于【技术实战】Vue功能样式实战【七】的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！。

文章推荐：基于C#的无边框窗体阴影绘制方案-开源研究系列文章

文章推荐：代理模式的理论与实现

文章推荐：【网络流】总结

文章推荐： SQL注入学习手册【笔记】

css - 更改 Bookdown 的 TOC 样式，Gitbook 样式
我喜欢调整目录的样式(例如背景颜色、字体)预订 , Gitbook 风格 HTML 文档。这可能吗？如果是这样，有人可以善意地指出我可以开始这样做的地方吗？谢谢你。最佳答案两个步骤: 1)
selector - CSS 选择器，用于在父级有一个子级时创建 CSS 样式，并为两个子级创建不同的 CSS 样式
是否可以使用纯 CSS 选择器根据子节点的兄弟节点数量为节点子节点(在我的例子中为 UL)提供不同的属性，特别是高度？例如，如果一个节点有 1 个子节点，则 UL 的高度是自动的，但是如果该节点有
dependencies - 是否可以在 cmake 中包含生成的 make 样式(不是 cmake 样式)依赖项文件？
我正在与 Vala 一起工作，它首先编译为 C，然后正常从 C 编译。 valac 的一项功能(Vala 编译器)是为 .vala 生成“fast-vapi”文件。 fast-vapi 本质上是为 .
html - 在类(class)内部设置类(class)样式，但不要在同一个类(class)的外部设置类(class)样式
我有两个具有 .body 类的 div，但是，一个位于另一个具有 .box 类的 div 中 - 如下所示: 我只想为 .box 内部的 .body 设置样式...但我在下面所
css - 如何在 html5 或 <iframe> 标签中使用内联 css 样式(样式 ="vertical-alignment:middle;")
**注意所有 <> 标签已被删除以允许代码显示**我已经玩了好几个小时了，如果不在设计结束时使用解决方法(即 Corel 绘图)，我就无法真正让它工作 *在我继续之前，首先，网站 URL 是 Adv
java - 在 Java/Clojure 中将 UTF-32 编码的字符串(C 样式)转换为 UTF-16(JSON 样式)编码的字符串
我从一个服务中接收到一个字符串，该字符串显然使用 UTF-32 编码对其 unicode 字符进行编码，例如:\U0001B000(C 风格的 unicode 编码)。但是，为了在 JSON 中序列化
应用程序资源中的 WPF 样式
我在应用程序资源中有一种样式，我想将其应用于许多不同的饼图。样式如下所示: 为了简单起见，我排除了更多的属性。这一切都很好。现在，我的一些馅饼需要有一个不同的“模型
wpf datagridcheckboxcolumn 样式
想象一下，我有一个名为“MyCheckBoxStyle”的 CheckBox 自定义样式。如何制作基于 MyCheckBoxStyle 嵌入自定义 DataGridCheckBoxColumn 样式
缩放后执行翻译的 WPF 样式
我有一个 Button我在 WPF 中开发的样式，如 this question 中所述.我想用这种风格做的另一件事是拥有 Button缩小一点点，使其看起来像被点击一样被点击。现在，转换代码如下所示
WPF 样式 DataGridHyperlinkColumn
我为超链接控件创建了一个样式:
自动完成缺少 css 样式
不知道为什么，但我的 typeahead.js 远程自动完成停止工作。我没有更改任何关于 typeahead.js 的代码，但既然它坏了，我一定是错的。你能看看我的site here吗？ ?我会创建
基于当前的 WPF 样式
有没有办法创建扩展当前样式的样式，即不是特定样式？我有一个 WPF 应用程序，我在其中创建样式来设置一些属性，例如边框或验证。现在我想尝试一些主题，看看哪
javascript - CSS 样式
我正在为一个网站提出问题，并希望 var reltext 中的正确/再试消息具有不同的颜色，即绿色表示正确，红色表示错误，并且每个旁边可能有一个小 png。有什么想法吗？ A local co
JavaScript DOM 样式
我想到达列表的父节点(使用 id 选择器)并使用纯 JavaScript 添加背景颜色来设置其样式。这是我的代码，但不起作用。 var listParentNode; listPare
javascript - 使用循环更改组件特征(样式)
关闭。此题需要details or clarity 。目前不接受答案。想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题. 已关闭 4 年前。 Improve th
Javascript 样式(如果特定内容存在或悬停)
过去几天我一直在与这段代码作斗争，我真的不知道该如何处理它。基本上，当用户将鼠标滚动到主导航菜单中的某个 LI 元素上时，就会运行一个 Javascript 函数，并根据触发该函数的元素将链接放入下
CSS 样式——如何显示一个人的姓名首字母或一个人的图像
使用这个可爱的 html 和 css 作为指南，我能够在我的照片上显示我的姓名首字母。这很好，但是，如果图像不存在，我只想显示首字母；如果图像存在，则不应渲染 peron 首字母。换句话说，当该图
CSS 样式——如何显示一个人的姓名首字母或一个人的图像
使用这个可爱的 html 和 css 作为指南，我能够在我的照片上显示我的姓名首字母。这很好，但是，如果图像不存在，我只想显示首字母；如果图像存在，则不应渲染 peron 首字母。换句话说，当该图
Java JButton 样式
是否有人尝试过将 JButton 设计为看起来像 NetBeans 工具栏按钮？这将只显示一张图片，当您将鼠标悬停在它上面时，会显示 1px 圆形角灰色边框，并且按钮顶部和底部的背景不同......似
graph - 如何在图表中设置默认系列/样式？
在 Ax2012 中使用图表，它们工作正常。但我想更改它在启动时显示的图表类型，例如“样条”图表，而不是默认的“柱状图”图表。这是我现在拥有的: http://i.stack.imgur.com/R

我是一只小鸟

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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

需求实战一

样式展示

代码展示

代码解读

需求实战二

样式展示

代码展示

代码解读

需求实战三

样式展示

代码展示

代码解读

需求实战四

样式展示

代码展示

代码解读

需求实战五

样式展示

代码展示

代码解读

需求实战六

样式展示

代码展示

代码解读