css动画渐变及动态宽度设置-vue demo制作

css动画渐变及动态宽度设置

<template>
  <div id="userLayout" :class="['user-layout-wrapper']">
    <div class="container">
      <div style="width:1300px;height:200px;margin:0 auto;background:#f0f0f0;">
        <div :class="changeID===2?'rowRecord':'rowRecord1'">
          <div :class="[item.id===changeID?'itemReocrd':'itemReocrd1']"
           @click="selectId(item)"
          v-for="item in content" :key="item.id">
          <div class="contss" v-if="item.id===changeID">

          </div>
        </div>
        </div>
        
    </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserLayout',
  data(){
    return {
      content:[{
        id:1,
      },{
        id:2,
      },{
        id:3,
      },{
        id:4,
      },{
        id:5,
      },{
        id:6,
      },],
      changeID:0,
      
    }
  },
  methods: {
    selectId(item){
      this.changeID=item.id
    },
   
  }
}
</script>

<style lang="less" scoped>
.contss{
  width:140px;
  height:200px;
  background:#1890ff;
  border-radius:10px;
  margin-right:20px;
  animation: 2.5s opacity2;
  animation-fill-mode:forwards;
}
  @keyframes opacity2{
    from {width:140px;margin:0 auto;}
to {width:330px;margin:0 auto;}
      0%{opacity:0}
      25%{opacity:.25;}
      50%{opacity:.5;}
      75%{opacity:.8;}
      100%{opacity:1;}
  }
.rowRecord1{
  width:900px;
  height:200px;
  margin:0 auto;
}
.rowRecord{
  width:900px;
  height:200px;
  margin:0 auto;
  animation:mymoves 1s;
animation-fill-mode:forwards;
}

@keyframes mymoves
{
from {width:900px;margin:0 auto;}
to {width:1100px;margin:0 auto;}
}

.itemReocrd1{
  width:140px;
  height:200px;
  margin-right:10px;
  background: #aaa;
  border:1px solid #f00;
  border-radius:10px;
  float:left;
}
.itemReocrd{
  width:140px;
  height:200px;
  border-radius:10px;
  margin-right:10px;
  float:left;
animation:mymove 2s;
animation-fill-mode:forwards;
}

@keyframes mymove
{
from {width:150px;margin:0 auto;}
to {width:350px;margin:0 auto;}
}

</style>