08.用fullpage+less实现360浏览器之第四屏（5）

发表于 | 分类于

想实现的效果：最主要是左边，一个搜索框+搜索结果，搜索框里面的内容逐帧显示，当top部分显示完，bottom搜索框才显示（注意延迟执行的运用）

利用到了：position transform transition animation

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="section section-four">
        <div class="search">
            <div class="top">
                <img src="images/section4_search.png" alt="">
                <div class="key"></div>
            </div>
            <div class="bottom">
                <img src="images/section4_result.png" alt="">
            </div>
        </div>
        <div class="info">
            <img src="images/section4_info.png" alt="">
        </div>
    </div>

less

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
.section-four{
  display: flex;//水平排列
  justify-content: space-between;
  align-items: center;
  padding: 0 5%;
  .search{
    //overflow: hidden;
    height: 446px;
    .top{
      position: relative;
      img{
        transform: translateX(-529px);
        transition: all 1s linear 0s;
      }
      .key{
        width: 0px;
        height: 22px;
        background: url("./../images/section4_key.png") no-repeat;
        position: absolute;
        left: 20px;
        top: 25px;
      }
    }
    .bottom{
      height: 0;
      overflow: hidden;
      transition: all 1s linear 4s;
    }
  }
  &.current{
    .search{
      .top{
        img{
          transform: none;
        }
        .key{
          animation: show 2.5s steps(5) 1.5s forwards;
        }
      }
      .bottom{
        height: 372px;
      }
    }
  }
}
@keyframes show {
  from{
    width: 0;
  }
  to{
    width: 99px;
  }
}

  • translateX(-529px); 设置负数，下面又设置为正常的了，通过过度效果，实现了搜索框从左到右慢慢显示出来

  • key之所以设置absolute，是因为要把它放进搜索框里面，子绝父相嘛，相对父亲移动，

  • bottom设置为 height: 0; overflow: hidden; 是因为bottom放的是搜索结果，等到top部分的img和key显示完，它才显示，delay的运用

  • 注意利用animation中animation-timing-function来实现逐帧动画（搜索框中的文字图片要逐帧动画，所以width为0）

补充

CSS3 animation 逐帧动画

逐帧动画主要利用了animation-timing-function，她有9个值，ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps([, [ start | end ] ]?) | cubic-bezier(x1, y1, x2, y2)

利用的值是：steps

steps([n, [ start | end ] ]?) 阶梯函数，这个函数可以把动画平均划分为基本相等的，n是一个自然数，意思是把一个动画平均分成n等分，直到平均地走完这个动画。跟linear是有区别的。linear是把动画作为一个整体，中间没有断电，而steps是把动画分段平均执行。

animation属性中的steps功能符深入介绍

只要有轨迹可循，即使肉眼看上去是断断续续的，实际上也是动画，steps()功能符可以让动画不连续。steps()指逐步运动

还要注意：animation-fill-mode

animation-fill-mode，定义动画播放时间之外的状态，顾名思义，要么就是在动画播放完了之后给它一个状态 animation-fill-mode : none | forwards | backwards | both; none，播放完之后不改变默认行为，默认值，forwards则是停在动画最后的的那个画面，backwards则是回调到动画最开始出现的画面，both则应用为动画结束或开始的状态

至于transfrom、transition、animation区别

注意：即使div设置为0px高度，里面放的img还是可以显示的，只是div高度为0

测试

1
2
3
4
5
<body>
<div style="overflow:visible;height: 0px" >
    <img src="../images/section4_result.png" alt="">
</div>
</body>

overflow 属性规定当内容溢出元素框时发生的事情，默认值是visible

效果：主要看第四屏

主要看第四屏