VUE实现折叠展开动画效果

VUE实现折叠展开动画效果

第一种情况：从中间向两边展开效果（水平缩放）

.input-search {
  position: absolute;
  bottom: 8px;
  right: 0px;
  width: auto;
  animation: mymove 0.5s infinite;
  animation-iteration-count: 1;
  border: none;
  .el-input__inner {
    border-radius: 4px 0 0 4px;
  }
}
@keyframes mymove {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

效果如图：

折叠搜索框

第二种：从右往左展开效果（改变元素宽度）

.inputDiv {
  width: auto;
  height: 32px;
  position: absolute;
  bottom: 8px;
  right: 0px;
  border-radius: 4px;
  overflow: hidden;
  animation: mymove 0.3s infinite;
  animation-iteration-count: 1;
  .input-search {
    width: auto;
    border: none;
    .el-input__inner {
      border-radius: 4px 0 0 4px;
    }
  }
}
@keyframes mymove {
  from {
    width: 0px;
  }
  to {
    width: 213px;
  }
}

效果如图：

折叠搜索框