不使用字体图标和图片，只使用css如何做出展开收起的效果

<i class="iconArrow" :class="[ littleNavState === item.meta.id ? 'arrowOpen' : '' ]"></i>

默认效果

 .iconArrow {

     position: absolute;

     top: 50%;

     right: 16px;

     width: 10px;

     -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

     transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

     transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

     transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

 }

 .iconArrow::before,

 .iconArrow::after {

     position: absolute;

     width: 6px;

     height: 1.5px;

     background: #fff;

     background: rgba(0, 0, 0, 0.65) \9;

     background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.65)), to(rgba(0, 0, 0, 0.65)));

     background-image: linear-gradient(to right, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65));

     background-image: none \9;

     border-radius: 2px;

     -webkit-transition: background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), top 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

     transition: background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), top 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

     transition: background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), top 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

     transition: background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), top 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

     content: '';

 }

 .iconArrow::before {

     -webkit-transform: rotate(45deg) translateY(-2px);

     -ms-transform: rotate(45deg) translateY(-2px);

     transform: rotate(45deg) translateY(-2px);

 }

 .iconArrow::after {

     -webkit-transform: rotate(-45deg) translateY(2px);

     -ms-transform: rotate(-45deg) translateY(2px);

     transform: rotate(-45deg) translateY(2px);

 }

 .nav > li:hover .iconArrow::after,

 .nav > li:hover .iconArrow::before {

     background: -webkit-gradient(linear, left top, right top, from(#1890ff), to(#1890ff));

     background: linear-gradient(to right, #1890ff, #1890ff);

 }

 .iconArrow::before {

     -webkit-transform: rotate(-45deg) translateX(2px);

     -ms-transform: rotate(-45deg) translateX(2px);

     transform: rotate(-45deg) translateX(2px);

 }

 .iconArrow::after {

     -webkit-transform: rotate(45deg) translateX(-2px);

     -ms-transform: rotate(45deg) translateX(-2px);

     transform: rotate(45deg) translateX(-2px);

 }

收起效果

 .iconArrow.arrowOpen {

     -webkit-transform: translateY(-2px);

     -ms-transform: translateY(-2px);

     transform: translateY(-2px);

 }

 .iconArrow.arrowOpen::after {

     -webkit-transform: rotate(-45deg) translateX(-2px);

     -ms-transform: rotate(-45deg) translateX(-2px);

     transform: rotate(-45deg) translateX(-2px);

 }

 .iconArrow.arrowOpen::before {

     -webkit-transform: rotate(45deg) translateX(2px);

     -ms-transform: rotate(45deg) translateX(2px);

     transform: rotate(45deg) translateX(2px);

 }