# 50projects50days

**Repository Path**: pdkax/50projects50days

## Basic Information

- **Project Name**: 50projects50days
- **Description**: 加油Promise不能半途而废
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: dev
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-11-25
- **Last Updated**: 2023-02-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 第一天

[expanding-cards](https://gitee.com/pdkax/50projects50days/tree/dev/expanding-cards-day1)

```css
.panel.active {
  flex: 5;
}
.panel.active h3 {
  opacity: 1;
  transition: opacity 0.3s ease-in 0.4s;
}
```

1.:heart:当一个行为发生，子元素和父元素**样式**发生变化,只设置一个激活类,通过他选中子元素 2.`filter:brightness(1)`用于控制明亮效果,也可用百分比形式,0%则为全黑效果

# 第二天

[progress-steps](https://gitee.com/pdkax/50projects50days/tree/dev/progress-steps-day2)

error 写结构是把进度原点,之间的线条看成是独立的,导致**结构编写错误**。返工更正浪费时间，如何避免。结构要更利于交互的编写。Git 版本库 id`4ea9206` 关注进度条实现 HTML

1.circles.length不要写死,开发需求变动,HTML结构发生变化,还需要对JS代码进行更改。浪费时间

```javascript
if (currentActive > circles.length) {
  //
  currentActive = circles.length;
}

progress.style.width = ((actives.length - 1) / (circles.length - 1)) * 100 + "%";
```

# 第三天
[rotating-nav-animation](https://gitee.com/pdkax/50projects50days/tree/dev/rotating-nav-animation-day2)

下面动画,整体初始将li移动`translate(-100%)` 第二个移动`translateX(-150%)` 第三个`translateX(-200%)`。最终动画发生设置为`translateX(0)`
。在使用`margin-left`向前移动造成每一个li都比前面距离远一点

```css
.panel.active {
  flex: 5;
}
.panel.active h3 {
  opacity: 1;
  transition: opacity 0.3s ease-in 0.4s;
}
/****************************************/
.container.show-nav + nav li {
  transform: translateX(0);
  transition-delay: 0.3s;
}

.container.show-nav .circle {
  transform: rotate(-70deg);
}

.container.show-nav {
  transform: rotate(-20deg);
}
```
day一天不完整,只要把`class`放在合适的位置,通过他选择发生变化的**元素**。即可
~
<img src="E:\50projects50days\day3.png" style="zoom:33%;" />

优势就是,当需要修改时可以减少冗余代码。并且更利于维护，毕竟只在一个类下:heart:


#第四天
[名字]()