css3 transtion属性的使用

主要实现多个内容排列时从下到上过渡 或者 从左到右过渡。
思路：主要是利用flex布局的flex-direction属性和align-items属性。

flex-direction属性决定主轴的方向（即项目的排列方向）
align-items属性定义项目在交叉轴上如何对齐。

一、从下到上过渡（方案1） 

1.先上效果图

效果图

2.代码如下（示例）：

html

 

   
111
   
222
   
333
   
444
 

css

  .box{
    background-color: pink;
    width: 400px;
    height: 400px;
    display: flex;
    flex-direction: column-reverse;
  }
  .box1{
    width: 400px;
    height: 50px;
    background-color:#142385;
    transition: height 1s;
  }
  .box2{
    width: 400px;
    height: 50px;
    background-color: #159298;
    transition: height 1s;
  }
  .box3{
    width: 400px;
    height: 50px;
    background-color: #42bcad;
    transition: height 1s;
  }
  .box4{
    width: 400px;
    height: 50px;
    background-color: #66ffcc;
    transition:height 1s;
  }
  .box1:hover,
  .box2:hover,
  .box3:hover,
  .box4:hover{
    height: 300px;
  }

二、从下到上过渡（方案2)

1.先上效果图

flex-end

2.代码如下（示例）：

html

 

   
111
   
222
   
333
   
444
 

css

  .box{
    background-color: pink;
    width: 400px;
    height: 400px;
    display: flex;
    align-items: flex-end;
  }
  .box1{
    width: 400px;
    height: 50px;
    background-color:#142385;
    transition: height 1s;
  }
  .box2{
    width: 400px;
    height: 50px;
    background-color: #159298;
    transition: height 1s;
  }
  .box3{
    width: 400px;
    height: 50px;
    background-color: #42bcad;
    transition: height 1s;
  }
  .box4{
    width: 400px;
    height: 50px;
    background-color: #66ffcc;
    transition:height 1s;
  }
  .box1:hover,
  .box2:hover,
  .box3:hover,
  .box4:hover{
    height: 300px;
  }

三、从右向左过渡（方案1）

1.先上效果图

row-

2.代码如下（示例）：

html

 

   
111
   
222
   
333
   
444
 

css

 .box {
    background-color: pink;
    width: 400px;
    height: 400px;
    display: flex;
    flex-direction: row-reverse;
  }
  .box1 {
    width: 50px;
    height: 400px;
    background-color: #142385;
    transition: width 1s;
  }
  .box2 {
    width: 50px;
    height: 400px;
    background-color: #159298;
    transition: width 1s;
  }
  .box3 {
    width: 50px;
    height: 400px;
    background-color: #42bcad;
    transition: width 1s;
  }
  .box4 {
    width: 50px;
    height: 400px;
    background-color: #66ffcc;
    transition: width 1s;
  }
  .box1:hover,
  .box2:hover,
  .box3:hover,
  .box4:hover {
    width: 300px;
  }

四、从右向左过渡（方案2）

1.先上效果图

column

2.代码如下（示例）：

html

 

   
111
   
222
   
333
   
444
 

css

  .box {
    background-color: pink;
    width: 400px;
    height: 400px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  .box1 {
    width:100px;
    height: 100px;
    background-color: #142385;
    transition: width 1s;
  }
  .box2 {
    width: 100px;
    height: 100px;
    background-color: #159298;
    transition: width 1s;
  }
  .box3 {
    width: 100px;
    height: 100px;
    background-color: #42bcad;
    transition: width 1s;
  }
  .box4 {
    width: 100px;
    height: 100px;
    background-color: #66ffcc;
    transition: width 1s;
  }
  .box1:hover,
  .box2:hover,
  .box3:hover,
  .box4:hover {
    width: 400px;
  }