一起看看怎么实现风景图丝滑切换介绍怎么写出封面的动画效果以及对transiton属性的讲解，通过对html元素类名链表的

一起看看怎么实现风景图的丝滑切换

我们一起看看效果吧

具体步骤

先上html结构，就是body里放了一个容器，然后容器里放了五个h3的div盒子

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="common.css" />
    <title>Expanding Cards</title>
  </head>
  <body>
    <div class="container">
      <div class="fz-panel fz-panel_active" style="background-image: url('https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
        <h3 class="fz-panel__title">Explore The World</h3>
      </div>
     <!-- 其余四个卡片结构类似 -->
    </div>

    <script src="common.js"></script>
  </body>
</html>

第一步就是把五个div平铺在网页中央,每个div背景设置为background:url(图片地址)，还有别忘还要在这个div里加一个标题，顺便把一个标题放到div盒子的底部，并把该标题的opcity设为0。

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  display: flex;/*弹性布局 特别适合移动端*/
  align-items: center;
  justify-self: center;
  height: 100vh; /* vh 相对单位 view height 一屏高度100vh ,等比例划分 100% */
  overflow: hidden;/*超出隐藏 */

}
.container{
  display: flex;
  width: 90vw;/*viewport width */
  height: 90vh;
  justify-content: center;
  align-items: center;
}

.fz-panel__title{
  position: relative;
  top: 71vh;
  left: 10px;
  color: #efecec;
  opacity: 0;
}

第二步就是将写一些样式来让图像有宽高（用vw,和vh写）、间距、和圆角这些，让初始的图片都是未展开的长胶囊的样子。

.fz-panel{
  height: 80vh;
  width: 10vh;
  border-radius: 41px;
  cursor: pointer;
  margin:1.5vh;
  position: relative;
  overflow: hidden;
  transition: all 700ms ease-in;


}

第三步就是写一个特殊的类叫 fz-panel_active ,设图片宽为89vw,并把标题设为可见。

.fz-panel.fz-panel_active{
  flex: 4.5;
  transition: 0.2ms;
}
.fz-panel_active .fz-panel__title{
  opacity: 1;
  transition:opacity 1.3 ease-in 0.4;
}

第四步用js来写，核心就是让js监听click事件，点击后用js的的dom api函数给点击的到的元素添加一个类名 .fz-panel_active，并在此之前清除从所有div的类名链表中删除这个.fz-panel_active。

const panels = document.querySelectorAll(".fz-panel");
panels.forEach((panel) => {
  panel.addEventListener("click", () => {
    removeActiveClass();
    // 给被点击到的元素添加类名前要把所有的图片盒子的fz-panel_active删除
    panel.classList.add("fz-panel_active");
      //添加类名
  });
});
//删除函数的实现
function removeActiveClass() {
  panels.forEach((panel) => {
    panel.classList.remove("fz-panel_active");
  });
}

细节部分 transition 的理解

如果我们不给图片盒子内的标题添加这个 transitions属性就会出现标题出现是有缺失、中途换行，让人观感下降。效果如下没有添加动画.gif

添加这个延迟属性等待这个图片盒子已经发生变化，宽度变长到可以容纳标题再让标题的透明度逐渐升高。

接下来我们来浅浅的了解一下transition这个属性

transition是一个让html元素样式改变时产生过渡动画的属性。

第一个参数就是什么属性变化才添加过渡动画，有all(所有变化) ，width (宽度变化)，opacity(透明度变化)，transfrom(元素移动的变化)

第二个就是过渡动画时间，我一般习惯是ms作为单位

第三个就是动作速度变化方式，就是我们高中物理学的各种运动学中加速度的不同变化产生的不同动画速度，有匀速运动，有加速度先加后减的变速运动······，不过不是很重要，我们只要选一个我们顺眼的就行。另外我们可以在浏览器右击检查再选择元素样式，再点击transition中的属性就可以直观看到速度怎么变的了

变化速度.jpg

可以看到可选的类型很多有ease-in in·Back等。第四个参数就是一个动画延迟时间等属性发生多久再开始产生动画。同样单位也是ms

启发

用JavaScript来改变类名列表来改变样式

我们改变元素样式不是直接通过JavaScript去操作样式，而是通过操作类名链表来改变样式，做到，html负责结构，css负责样式，JavaScript负责行为，让JavaScript代码更加优雅、简洁。

前端的高级目标就是写出让用户无可挑剔的效果

众所周知，一般薪资越高，时间越充足，做出来的前端越完美，反之就是完成基本功能就好。可能以后小厂的前端就是后端加ai写完，只有中厂和大厂有前端岗位，他们对细节有很高要求。那么以后我们前端要可能要越来越卷细节了。