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

默认效果

 1 .iconArrow { 2  position: absolute; 3  top: 50%; 4  right: 16px; 5  width: 10px; 6  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 7  transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 8  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 9  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);10 }11 .iconArrow::before,12 .iconArrow::after {13  position: absolute;14  width: 6px;15  height: 1.5px;16  background: #fff;17  background: rgba(0, 0, 0, 0.65) \9;18  background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.65)), to(rgba(0, 0, 0, 0.65)));19  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65));20  background-image: none \9;21  border-radius: 2px;22  -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);23  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);24  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);25  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);26  content: ‘‘;27 }28 .iconArrow::before {29  -webkit-transform: rotate(45deg) translateY(-2px);30  -ms-transform: rotate(45deg) translateY(-2px);31  transform: rotate(45deg) translateY(-2px);32 }33 .iconArrow::after {34  -webkit-transform: rotate(-45deg) translateY(2px);35  -ms-transform: rotate(-45deg) translateY(2px);36  transform: rotate(-45deg) translateY(2px);37 }38 .nav > li:hover .iconArrow::after,39 .nav > li:hover .iconArrow::before {40  background: -webkit-gradient(linear, left top, right top, from(#1890ff), to(#1890ff));41  background: linear-gradient(to right, #1890ff, #1890ff);42 }43 .iconArrow::before {44  -webkit-transform: rotate(-45deg) translateX(2px);45  -ms-transform: rotate(-45deg) translateX(2px);46  transform: rotate(-45deg) translateX(2px);47 }48 .iconArrow::after {49  -webkit-transform: rotate(45deg) translateX(-2px);50  -ms-transform: rotate(45deg) translateX(-2px);51  transform: rotate(45deg) translateX(-2px);52 }

收起效果

 1 .iconArrow.arrowOpen { 2  -webkit-transform: translateY(-2px); 3  -ms-transform: translateY(-2px); 4  transform: translateY(-2px); 5 } 6 .iconArrow.arrowOpen::after { 7  -webkit-transform: rotate(-45deg) translateX(-2px); 8  -ms-transform: rotate(-45deg) translateX(-2px); 9  transform: rotate(-45deg) translateX(-2px);10 }11 .iconArrow.arrowOpen::before {12  -webkit-transform: rotate(45deg) translateX(2px);13  -ms-transform: rotate(45deg) translateX(2px);14  transform: rotate(45deg) translateX(2px);15 }