前言
在我写的之前的文章中，大多数都是针对一个技术点进行讲解，因为我是一个没有创意的人，所以很少写什么有很漂亮的效果的文章或者demo；
而这次是因为之前有一次逛掘金，看到了竞赛的模块，然后手一抖就点了报名，手都抖了那就只能硬着头皮上了，动画效果我就算了，本来就没啥创意，那就来一个简单的 ToDoList 吧；
但是我不允许我的 ToDoList 太 low，于是开始大量的参考别人设计的UI，然后加上自己的一些想法和创意，最后完成了这个简单的 ToDoList；
我要我的 ToDoList 不仅好看，还要能看很多技术点，同时这些个技术点不需要用的有多高明，让小白都能上手都能看懂一二，接下来就开始正式的炫技；
先看效果，感觉不错的话麻烦帮我在码上掘金中点个赞，非常感谢！！！
在 PC 上全屏查看效果最佳！
分解
我的 ToDoList 一共分为四个大部分，如上图所示，分别是：
- 顶部的标题栏
- 添加任务的输入框
- 显示任务的列表
- 浮动右侧的筛选
当然还需要一个好看的背景，这个就不算了，我直接一个线性渐变就搞定了；
css 部分
顶部的标题栏
顶部标题栏可以看到是一个艺术字的效果，有点立体的感觉，同时可以看大字体的颜色和背景色会有混合的效果；
其实这些样式都非常简单，css代码如下：
.todo-title { font-family: 'Helvetica Neue', sans-serif; font-size: 60px; font-weight: bold; font-style: italic; text-align: center; text-transform: uppercase; color: #333; text-shadow: 1px 1px 0 #999, 2px 2px 0 #888, 3px 3px 0 #777, 4px 4px 0 #666, 5px 5px 0 #555, 6px 6px 0 #444, 7px 7px 6px rgba(0, 0, 0, 0.4); mix-blend-mode: color-burn; }
首先随便设置一下字体样式，然后使用text-transform属性将字母转换为大写；
使用text-shadow属性设置文字的阴影，这里设置了七个阴影，使字体样式变的立体；
最后使用mix-blend-mode属性设置混合模式，这里使用的是color-burn，这个属性的作用是将文字的颜色和背景色进行混合；
可以看到这里并没有什么太多的高大上的技术，不熟悉的属性大概也就一两个，但是最后实现的效果很不错，不管你觉不觉得，反正我是这样觉得的；
友情提示：这次不讲技术点，只讲实现效果的代码，对技术点不熟悉的可以去
MDN查看相关属性的用法；
添加任务的输入框
这里的样式没啥好说的，就是一个输入框加一个按钮，但是可以看到这里的效果，输入框获取焦点的时候，整个包裹输入框的容器会有一个阴影回收聚焦的效果；
这里的效果也是非常简单，css代码如下：
.input-wrap:has(input:focus) { box-shadow: 2px 2px 1px 2px rgba(0, 0, 0, 0.5); }
这么炫酷的效果居然只有一行代码，这里使用了css的has伪类选择器，这个选择器的作用是选择包含指定选择器的元素；
可以理解为如果.input-wrap下面的input元素获取到了焦点，那么就会给.input-wrap添加一个阴影；
其他的css就是一些简单的样式，没有什么特别的属性，这里就不贴出来了；
显示任务的列表
显示任务的列表是整个 ToDoList 的核心，这里的样式也是最复杂的，但是也是最有意思的；
首先这里有三种状态的任务，分别是进行中、已完成、未完成；
他们的样式看起来是一样的，就是背景色不同，现在只是讲css部分，就先忽略它们之间的区别；
这里的样式也是非常简单，css代码如下：
.list-item { position: relative; display: flex; align-items: center; justify-content: space-between; border-radius: 4px; background-image: linear-gradient(90deg, lighten(@active-color, 10%), darken(@active-color, 10%)); margin-bottom: 10px; padding: 10px; color: #fff; cursor: pointer; overflow: hidden; transition: all 2s; &::after { position: absolute; content: ''; top: 0; left: 0; width: 0; height: 100%; z-index: -1; transition: all 2s; } &.success::after { background-image: linear-gradient(90deg, lighten(@success-color, 10%), darken(@success-color, 10%)); width: 100%; } &.fail::after { background-image: linear-gradient(90deg, lighten(@fail-color, 10%), darken(@fail-color, 10%)); width: 100%; } svg { margin-right: 10px; path { fill: transparent; stroke: transparent; stroke-width: 3; stroke-dasharray: 100; stroke-dashoffset: 100; } } label { font-size: 16px; color: #fff; flex-grow: 1; cursor: pointer; } }
这里贴出的是全部的css代码，里面没有写注释，因为不需要全部都看懂，只需要看懂其中的一部分就可以了；
首先进行中的样式的颜色是使用linear-gradient属性设置的，而已完成和未完成的样式是使用::after伪元素设置的；
因为已完成和未完成最后会有一个动画效果，所以这里使用了::after伪元素来完成这个动画效果；
可以看到里面还有svg的样式，没想到还能掺杂svg的知识点吧，这里的svg是用来实现已完成和未完成的勾选图标的，同时里面也有动画效果，后面会讲到；
这里只要的技术点是less的lighten和darken函数，以及less的变量；
lighten函数的作用是将颜色变亮，darken函数的作用是将颜色变暗，这里的颜色是使用less的变量来设置的；
同时可以看到这个顶部有一个小提示的标题，这个标题使用了position: sticky属性，这个属性的作用是让元素在滚动到指定位置的时候固定在页面上；
浮动右侧的筛选
这里其实没有什么技术点，就是一个简单的绝对定位，没有动画效果，就不贴效果图和代码了；
js 部分
这里使用的技术是vue3，所以js方面也就是vue3的知识点；
添加任务
首先我这里没有删除任务的功能，也没有修改任务的功能，只有添加任务和修改任务状态的功能；
这一块只需要一个list就可以搞定了，然后新增的时候就直接往里面push，修改状态的时候就直接修改list里面的数据就可以了；
首先在输入框上面绑定一个text，然后在按钮上面绑定一个click事件，这里的click事件就是用来添加任务的；
<template> <div class="input-wrap" @keyup.enter="handleAdd"> <input v-model="text" placeholder="新增一个待办事项吧"/> <button @click="handleAdd">新增</button> </div> </template> <script setup> import { ref } from "vue"; const text = ref(''); const list = ref([]); const handleAdd = () => { if (text.value === '') return; list.value.push({ id: Math.random().toString(36).substr(2), status: 'active', label: text.value, }); text.value = ''; } </script>
可以看到我在最外层的div上面绑定了一个keyup.enter事件，这样我们就可以使用回车的方式来添加任务了；
这里的逻辑很简单，调用handleAdd就会往list里面push一个对象，这个对象里面有id、status、label三个属性；
id是一个随机的字符串，作为一个唯一的标识，用于后续的transition动画；
status是任务的状态，这里的状态有三种，分别是active、success、fail，没有使用TS就没有枚举，也懒得全局添加常量了；
label就是任务的内容，这里的label是从输入框里面获取的，所以这里需要一个text来绑定输入框的内容；
渲染任务
因为会有过滤状态，所以渲染任务并不是直接使用list来渲染的，而是使用computed来渲染的；
<template> <div class="todo-list"> <div class="todo-tip"> 今日事，今日毕，今天还有 {{ remainder }} 件事情要做 </div> <div v-for="item in filterList" :key="item.id" :class="['list-item', item.status]" > <!-- <svg>成功的svg省略</svg>--> <!-- <svg>失败的svg省略</svg>--> <label v-text="item.label"/> </div> <div class="filter-bar"> <div :class="['filter-bar-item', filterStatus === '' && 'active']" @click="filterStatus = ''" > 全部 </div> <div :class="['filter-bar-item', filterStatus === 'active' && 'active']" @click="filterStatus = 'active'" > 待完成 </div> <!-- <div>已完成、未完成省略</div>--> </div> </div> </template> <script setup> import { ref, computed } from "vue"; // 进行中的数量 const remainder = computed(() => list.value.filter(item => item.status === 'active').length); // 过滤状态标识 const filterStatus = ref(''); // 过滤后的任务列表 const filterList = computed(() => { if (filterStatus.value === '') { return list.value; } return list.value.filter(item => item.status === filterStatus.value); }); </script>
上面为了方便阅读代码，删除了一些不相关的代码，省略了一些相同代码；
这里就是computed函数的运用了，使用在了两个地方，一个是remainder表示当前进行中的任务数量，还有一个是filterList表示过滤后的任务列表；
然后可以看到右侧的过滤列表的class绑定，这里并没使用三元表达式，而是使用了&&；
:class="['filter-bar-item', filterStatus === 'active' && 'active']"
这个表达式的意思是，如果前面一个条件成立，那么就会返回后面的值，如果前面一个条件不成立，那么就会返回false，这样就不会添加active这个class了；
一个小操作，可以比使用三元表达式更加简洁，还有||也是一样的，看各位的实际场景来使用；
修改任务状态
这里修改任务状态就是对列表中的status进行修改，然后filterList就会自动过滤掉；
<template> <div class="todo-list"> <div v-for="item in filterList" :key="item.id" :class="['list-item', item.status]" > <svg @click="handleDone(item, 'success')"> 省略具体的svg </svg> <svg @click="handleDone(item, 'fail')"> 省略具体的svg </svg> <label v-text="item.label"/> </div> </div> </template> <script setup> const handleDone = (item, status) => { item.status = status; } </script>
可以看到我这里用了两个svg来表示任务的完成状态按钮，也就是大家看到最前面截图的列表上前面两个框框；
这里的代码很简单，就是调用handleDone函数，然后传入当前的item和status，然后修改item的status就可以了；
剩下的交给computed和vue的响应式就可以了；
js想关的到这里就差不多了，剩下的就是动画部分了；
动画
动画最开始一个就是输入框的聚焦效果，没啥好说的，就是一个简单的transition属性就搞定了；
抛开这个，今天要介绍的动画效果有四个，分别是：
vue的transition动画svg的描边动画css的transition动画css的animation动画
vue的transition动画
这个动画是vue内置的组件，在我这里的应用就是任务列表的过渡动画；
<template> <div class="todo-list"> <transition-group name="fade" mode="out-in" :duration="500" tag="div" style="height: 500px; overflow: auto; margin: 0 -20px; padding: 0 20px;" > <div v-for="item in filterList" :key="item.id" :class="['list-item', item.status]" > <!--省略--> </div> </transition-group> </div> </template> <style lang="less"> .fade-enter-active, .fade-leave-active { transition: all 0.3s ease-in-out; } .fade-enter-from, .fade-leave-to { opacity: 0; transform: translateY(-20px); } </style>
这是一个非常简单的渐入的过渡动画效果，可以看下面的截图，每次添加任务的时候会渐入的添加进来：
除了上面这个效果以外，还有就是列表切换的时候，也会有一个渐出的效果，这里大家可以自己在码上掘金中体验一下；
svg的描边动画
svg的描边动画在这个里面是用来表示任务的完成状态的，也就是前面提到的两个框框；
<template> <div class="todo-list"> <div v-for="item in filterList" :key="item.id" :class="['list-item', item.status]" > <svg :class="['success-icon', item.status]" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" @mouseenter="handleHover($event, item, true)" @mouseleave="handleHover($event, item, false)" > <rect x="1" y="1" rx="4" ry="4" width="30" height="30" stroke="#fff" fill="transparent" stroke-width="2"/> <path d="M6 14l6 8 L24 10"> <animate attributeName="stroke-dashoffset" from="100" to="0" dur="1s" begin="0s" fill="freeze" /> </path> </svg> <svg :class="['fail-icon', item.status]" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" @mouseenter="handleHover($event, item, true)" @mouseleave="handleHover($event, item, false)" > <rect x="1" y="1" rx="4" ry="4" width="30" height="30" stroke="#fff" fill="transparent" stroke-width="2"/> <path d="M8,8 L23,23 M23,8 L8,23" transform="rotate(-90, 15.5, 15.5)"> <animate attributeName="stroke-dashoffset" from="100" to="0" dur="1s" begin="0s" fill="freeze" /> </path> </svg> <label v-text="item.label"/> </div> </div> </template> <script setup> const handleHover = (e, item, hasHover) => { if (item.hover === hasHover) return; item.hover = hasHover; const path = e.target.getElementsByTagName('path')[0]; // 播放动画 if (hasHover) { path.style.stroke = '#fff' e.target.getElementsByTagName('animate')[0].beginElement(); } else { path.style.stroke = 'transparent'; } } </script>
这里首先简简单单的画两个svg，里面的rect就是我们看到的框框，然后path就是我们看到的对勾和叉叉；
在path里面再加上一个animate标签，用来控制描边动画的效果；
但是这里有一个问题，就是svg的animate在一放到页面就会播放动画，这里就必须要用到js来控制了；
这里通过mouseenter和mouseleave来控制hover的状态，然后通过js来控制animate的播放；
为了在不是hover的时候，不显示对钩和叉叉，所以在mouseleave的时候，把path的stroke设置为transparent；
在mouseenter的时候，把path的stroke设置为#fff，这样就可以看到对钩和叉叉了；
然后执行beginElement方法，就可以播放动画了；
css的animation动画和transition动画
css的animation和transition放在一起讲，因为都是任务状态切换的动画效果；
css的animation动画应用在状态的切换，任务完成会播放一个庆祝的动画（放大缩小），任务失败会播放一个失败的动画（抖动）；
css的transition动画就是背景色从0到100%填充的一个过程；
<template> <div class="todo-list"> <div v-for="item in filterList" :key="item.id" :class="['list-item', item.status]" > <svg :class="['success-icon', item.status]" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" @click="handleDone(item, 'success')" > <rect x="1" y="1" rx="4" ry="4" width="30" height="30" stroke="#fff" fill="transparent" stroke-width="2"/> <path d="M6 14l6 8 L24 10" > <animate attributeName="stroke-dashoffset" from="100" to="0" dur="1s" begin="0s" fill="freeze" /> </path> </svg> <svg :class="['fail-icon', item.status]" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" @click="handleDone(item, 'fail')" > <rect x="1" y="1" rx="4" ry="4" width="30" height="30" stroke="#fff" fill="transparent" stroke-width="2"/> <path d="M8,8 L23,23 M23,8 L8,23" transform="rotate(-90, 15.5, 15.5)" > <animate attributeName="stroke-dashoffset" from="100" to="0" dur="1s" begin="0s" fill="freeze" /> </path> </svg> <label v-text="item.label"/> </div> </div> </template> <style lang="less"> /*失败动画，执行一次*/ .list-item.fail { animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both; transform: translate3d(0, 0, 0); backface-visibility: hidden; perspective: 1000px; } @keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } } /*庆祝动画，执行一次*/ .list-item.success { animation: celebrate 0.82s cubic-bezier(.36, .07, .19, .97) both; transform: translate3d(0, 0, 0); backface-visibility: hidden; perspective: 1000px; } @keyframes celebrate { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } </style>
上面的代码就是css的animation动画，因为我们使用vue动态添加的class，所以每次状态切换都会播放动画；
animation动画默认只会播放一次，所以无需我们添加额外的属性来做控制；
animation动画的关键点就是keyframes，这里就不多说了；
.todo-list { .list-item { &::after { position: absolute; content: ''; top: 0; left: 0; width: 0; height: 100%; z-index: -1; transition: all 2s; } &.success::after { background-image: linear-gradient(90deg, lighten(@success-color, 10%), darken(@success-color, 10%)); width: 100%; } &.fail::after { background-image: linear-gradient(90deg, lighten(@fail-color, 10%), darken(@fail-color, 10%)); width: 100%; } } }
上面省略了额外的一些样式，只保留状态切换背景色填充的样式；
上面的代码就是css的transition动画，原理就是使用::after伪元素，然后通过transition属性来控制背景色的填充；
最开始width为0，然后当添加了success或者fail的class时，width就会变为100%，然后就会有一个过渡的效果；
这样看起来的效果就是状态切换的时候，背景色会从0到100%填充，但是再次状态切换就没有这个效果了，因为::after这个时候的width已经是100%了，所以就没有过渡的效果了；
总结
到这里我这个 ToDoList 相关的技术点已经介绍了七七八八了，不用什么高大上的技术，但是也是一个不错的练手项目；
其中涉及到的技术点有：
vue的基本使用vue的computed计算属性vue的transition过渡动画css的animation动画css的transition动画css的has属性css的一些布局和其他基础知识less的使用less的颜色函数less的变量svg的animate动画
这些技术单独拿出来说可能都不是什么难点，但是这些技术点的组合使用，就能够做出一个不错的效果；
并且这里并不是特别深入的使用，非常适合新手练手；
最后这个在参加码上掘金编程挑战大赛，如果可以的话，麻烦在码上掘金中给我点个赞，谢谢；
