不使用字体图标和图片，只使用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);
 }