vue动画分享

动画属性

星光闪烁，涟漪效果

@keyframes living {
            0%{
                transform: scale(1);
                opacity: 0.5;  
            }
            50%{
                transform: scale(1.5);  
                opacity: 0;   /*圆形放大的同时，透明度逐渐减小为0*/
            }
            100%{
                transform: scale(1);
                opacity: 0.5;
            }
}
.live span{
            position: absolute;
            width: 100px;
            height: 100px;
            left: 0;
            bottom: 0;
            background: #fff;
            border-radius: 50%;
           animation: living 3s linear infinite;
            z-index: -1;
}
.live span:nth-child(2){
            animation-delay: 1.5s; /*第二个span动画延迟1.5秒*/
}

乱序

HTML部分

<button v-on:click="shuffles">Shuffles</button>
    <transition-group name="cell" tag="div" class="container">
      <div v-for="cell in cells" :key = "cell.id" class="cell">
        {{cell.number}}
      </div>
    </transition-group>

数据

cells: Array.apply(null,{length:81}).map(function(_,index){
        return {
          id: index,
          number: index%9+1
        }
      }),

方法

shuffles: function () {
      this.cells = _.shuffle(this.cells);
    }

样式

.container {
    position: relative;
    left: 400px;
    width: 238px;
    flex-wrap: wrap;
    display: flex;
    margin-top: 10px;
  }
   .cell {
      width: 25px;
      height: 25px;
      text-align: center;
      line-height: 20px;
      border: 1px solid #aaa;
      margin-right: -1px;
      margin-bottom: -1px;
    }
    .cell:nth-child(3n){
      margin-right: 0;
    }
    .cell:nth-child(27n){
      margin-bottom: 0;
    }
    .cell-move {
      transition: transform 1s;
    }