页脚向上滑动菜单图标向下滑动时反转

Question

我有带项目的页脚向上滑动菜单，这里是带有向上箭头图标的菜单标题我需要当向上滑动时菜单图标位置在上面，当向下滑动时菜单箭头图标应该在反向位置并点击当有人点击向下时，标题幻灯片菜单应该保持，在此先感谢。

.menu-mobile {
  font-weight: 100;
  background: #ffc20e;
  width: 100%;
  height: 135px;
  padding-top: 0px;
  position: fixed;
  z-index: 100;
  -webkit-box-shadow: -3px 0px 5px 0px rgba(0, 0, 0, 0.2);
  box-shadow: -3px 0px 5px 0px rgba(0, 0, 0, 0.2);
  bottom: -90px;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  color: #222;
  display:block!important;
  border-top-right-radius: 23px;
  border-top-left-radius: 23px;
}
.menu-mobile:hover, .menu-mobile:focus {
  transform: translate(0px, -120px);
  animation-timing-function: 1s ease-in;
}
.menu-mobile .title {
  position: absolute;
  left: 52%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 15px;
  font-weight: 800;
  font-size: 15px;
  color:#003D3F;
}
.menu-mobile .nav {
  position: absolute;
  left: 50%;
  top: 45px;
  width: 100%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  font-weight: 100;
  display: block;
}
.menu-mobile .nav li {
  list-style-type: none;
  background-color:#EFEFEF;
}
.arrow{
    width: 15px;
    margin-right: 7px;
}

<div class="menu-mobile">
    <div class="title"><img src="https://cdn.icon-icons.com/icons2/1883/PNG/512/caretsymbol_120671.png" class="arrow">MENU</div>
    <ul class="nav">
      <li><a href="#"><i class="ti-dashboard menu-icon mr-2 fa-lg menu-icon-color active-nav db-iconmd"></i>Menu 1</a></li>
      </ul>
      </div>

Answer 1

只需在下面添加 class:

.menu-mobile:hover .arrow, .menu-mobile:focus .arrow {
    transform: rotate(180deg)
 }

.menu-mobile {
  font-weight: 100;
  background: #ffc20e;
  width: 100%;
  height: 135px;
  padding-top: 0px;
  position: fixed;
  z-index: 100;
  -webkit-box-shadow: -3px 0px 5px 0px rgba(0, 0, 0, 0.2);
  box-shadow: -3px 0px 5px 0px rgba(0, 0, 0, 0.2);
  bottom: -90px;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  color: #222;
  display: block!important;
  border-top-right-radius: 23px;
  border-top-left-radius: 23px;
}

.menu-mobile:hover,
.menu-mobile:focus {
  transform: translate(0px, -120px);
  animation-timing-function: 1s ease-in;
}

.menu-mobile .title {
  position: absolute;
  left: 52%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 15px;
  font-weight: 800;
  font-size: 15px;
  color: #003D3F;
}

.menu-mobile .nav {
  position: absolute;
  left: 50%;
  top: 45px;
  width: 100%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  font-weight: 100;
  display: block;
}

.menu-mobile .nav li {
  list-style-type: none;
  background-color: #EFEFEF;
}

.arrow {
  width: 15px;
  margin-right: 7px;
}

.menu-mobile:hover .arrow,
.menu-mobile:focus .arrow {
  transform: rotate(180deg)
}

<div class="menu-mobile">
  <div class="title"><img src="https://cdn.icon-icons.com/icons2/1883/PNG/512/caretsymbol_120671.png" class="arrow">MENU</div>
  <ul class="nav">
    <li><a href="#"><i class="ti-dashboard menu-icon mr-2 fa-lg menu-icon-color active-nav db-iconmd"></i>Menu 1</a></li>
  </ul>
</div>

页脚向上滑动菜单图标向下滑动时反转

footer slide up menu icon reverse when slide down

html

css

menu