# funny-demo-vue2

**Repository Path**: ppipp/funny-demo-vue2

## Basic Information

- **Project Name**: funny-demo-vue2
- **Description**: 用原生html+css+vue2写一些小demo
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2021-07-29
- **Last Updated**: 2021-07-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# funny-demo (vue2)

基于 vue2 开发的个人小 demo

用于熟悉 css 以及 vue2 的组件化开发等

### 项目一 myComponents

---

个人组件（参考 element 和 antd 的 UI 交互）

都是由 html+css 封装而成。根据之后的 demo 陆续封装~

按钮状态增加了 <font color=#E6A23C>**loading**</font> 和 <font color=#F56C6C>**waiting**</font>

<font color=#E6A23C>**loading**</font> 暂时是用图片+旋转（之后再优化）

<font color=#F56C6C>**waiting**</font> 则是用了 css 伪类和动画制作而成

![myComponents.png](https://gitee.com/hdw0504/funny-demo-vue2/raw/master/src/assets/README/myComponents.png)

### 项目二 todoList

---

一个小小的待办事项列表 demo 加点动画效果（动画未完成）

![myComponents.png](https://gitee.com/hdw0504/funny-demo-vue2/raw/master/src/assets/README/todoList.png)

项目思路暂时有 2 种 （为了解决 transition-group bug 使用第三种）

~~1.设置执行中 去执行 已完成三种 list 根据操作来进行增删~~

~~2.主要围绕着状态及创建和完成时间来**排序**（Array.sort()）~~

3.一个 list 存储，改变状态并修改其位置...

遇到的天坑 **transition-group**
在使用唯一 key 绑定而不是使用 index 绑定的情况下

发现同时修改列表多个参数的时候 transition-group 是不会动的

在此项目解决办法 （\$nextTick）

```
// 去执行
    toDoing(inx) {
      // 先修改位置
      const cur = this.list.splice(inx, 1)[0];
      this.list.unshift(cur);
      // transition-group bug？ 等位置移动的动画结束后 再修改值
      this.$nextTick(() => {
        this.list[0].status = 0;
        // 如果已经存在正在执行的
        if (this.list.length >= 2 && !this.list[1].status) this.list[1].status = 1;
      });
    },
```

### 项目三 jumpBall

---

纯 css 和一个 div 模拟小球弹跳

**radial-gradient** 渐变 给小球上色

**animation** 动画 赋予小球弹跳能力

**cubic-bezier ** 贝塞尔曲线 设置关键帧速度

...

未完待续...