关键帧动画绝对定位按钮

Question

我在z-index处有一个大按钮：1，分别在z-indices 0.9和0.8处覆盖两个较小的按钮。单击第一个按钮，它们应该滑出。这只有在他们没有＆＃34;位置时才会发生：绝对;＆＃34;但是这会导致它们被放置在屏幕的下方，而不是放在要覆盖它们的元素下面。

链接到CodePen https://codepen.io/Gladdstone/pen/aYObGy

＆＃13;

＆＃13;

function setConversion(obj) {
  if($(obj).hasClass("buttonpress")) {
      $(obj).removeClass("buttonpress");

      // add "in" animation classes
      $("#celsius").addClass("celsius-in");
      $("#fahrenheit").addClass("fahrenheit-in");

      // remove "out" animation classes
      if($("#celsius").hasClass("celsius-out")) {
          $("#celsius").removeClass("celsius-out");
          $("#fahrenheit").removeClass("fahrenheit-out");
      }
  } else {
      $(obj).addClass("buttonpress");

      // add "out" animation classes
      $("#celsius").addClass("celsius-out");
      $("#fahrenheit").addClass("fahrenheit-out");

      // remove "in" animation classes
      if($("#celsius").hasClass("celsius-in")) {
          $("#celsius").removeClass("celsius-in");
          $("#fahrenheit").removeClass("fahrenheit-in");
      }
  }
}

＆＃13;

.celsius-in {
    animation-name: celsius-in;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

.celsius-out {
    animation-name: celsius-out;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

.fahrenheit-in {
    animation-name: fahrenheit-in;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

.fahrenheit-out {
    animation-name: fahrenheit-out;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

.overmap {
    position: absolute;
    z-index: 1;
}

.temp-small {
    position: absolute;
    border-radius: 50%;
    border-color: #007aff;
    background-color: #007aff;
    box-shadow: 0px 4px 10px #888888;
    color: #ffffff;
    font-size: 1.2rem;
    text-align: center;
    vertical-align: middle;
    margin-left: 75%;
    height: 10vw;
    width: 10vw;
    transition: box-shadow 0.3s ease-in-out;
}

#celsius {
    z-index: 0.8;
}

#fahrenheit {
    z-index: 0.9;
}

#temp {
    border-radius: 50%;
    border-color: #007aff;
    background-color: #007aff;
    box-shadow: 0px 4px 10px #888888;
    color: #ffffff;
    font-size: 2rem;
    text-align: center;
    vertical-align: middle;
    padding-right: 10%;
    margin-left: 75%;
    height: 20vw;
    width: 20vw;
    transition: box-shadow 0.3s ease-in-out;
}

#tempbutton {
    bottom: 10%;
    width: 100%;
}

@keyframes celsius-out {
    from { margin-left: 75%; }
    to { margin-left: 30%; }
}

@keyframes celsius-in {
    from { margin-left: 30%; }
    to { margin-left: 75%; }
}

@keyframes fahrenheit-out {
    from { margin-left: 75%; }
    to { margin-left: 50%; }
}

@keyframes fahrenheit-in {
    from { margin-left: 50%; }
    to { margin-left: 75%; }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tempbutton" class="overmap">
     <button id="temp" type="button" onclick="setConversion(this);">78&deg;</button>
     <button id="fahrenheit" type="button" class="temp-small">&deg;F</button>
     <button id="celsius" type="button" class="temp-small">&deg;C</button>  
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这是你想要的吗？

function setConversion(obj) {
  if($(obj).hasClass("buttonpress")) {
      $(obj).removeClass("buttonpress");

      // add "in" animation classes
      $("#celsius").addClass("celsius-in");
      $("#fahrenheit").addClass("fahrenheit-in");

      // remove "out" animation classes
      if($("#celsius").hasClass("celsius-out")) {
          $("#celsius").removeClass("celsius-out");
          $("#fahrenheit").removeClass("fahrenheit-out");
      }
  } else {
      $(obj).addClass("buttonpress");

      // add "out" animation classes
      $("#celsius").addClass("celsius-out");
      $("#fahrenheit").addClass("fahrenheit-out");

      // remove "in" animation classes
      if($("#celsius").hasClass("celsius-in")) {
          $("#celsius").removeClass("celsius-in");
          $("#fahrenheit").removeClass("fahrenheit-in");
      }
  }
}

@charset "utf-8";
/* CSS Document */

.celsius-in {
    animation-name: celsius-in;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}
.celsius-out {
    animation-name: celsius-out;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}
.fahrenheit-in {
    animation-name: fahrenheit-in;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}
.fahrenheit-out {
    animation-name: fahrenheit-out;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}
.overmap {
    position: absolute;
    z-index: 1;
}
.temp-small {
    position: absolute;
    border-radius: 50%;
    border-color: #007aff;
    background-color: #007aff;
    box-shadow: 0px 4px 10px #888888;
    color: #ffffff;
    font-size: 1.2rem;
    text-align: center;
    vertical-align: middle;
    height: 10vw;
    width: 10vw;
    transition: box-shadow 0.3s ease-in-out;
    right: 60px;
    top: 45px;
}
#temp {
    position: relative;
    border-radius: 50%;
    border-color: #007aff;
    background-color: #007aff;
    box-shadow: 0px 4px 10px #888888;
    color: #ffffff;
    font-size: 2rem;
    text-align: center;
    vertical-align: middle;
    padding-right: 10%;
    margin-left: 75%;
    height: 20vw;
    width: 20vw;
    transition: box-shadow 0.3s ease-in-out;
    z-index: 5;
}
#tempbutton {
    bottom: 10%;
    width: 100%;
    position: relative;
}

@keyframes celsius-out {
    from { right: 40px; }
    to { right: 50%; }
}

@keyframes celsius-in {
    from { right: 50%; }
    to { right: 40px; }
}

@keyframes fahrenheit-out {
    from { right: 40px; }
    to { right: 70%; }
}

@keyframes fahrenheit-in {
    from { right: 70%; }
    to {right: 40px;}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tempbutton" class="overmap">
     <button id="temp" type="button" onclick="setConversion(this);">78&deg;</button>
     <button id="fahrenheit" type="button" class="temp-small">&deg;F</button>
     <button id="celsius" type="button" class="temp-small">&deg;C</button>  
</div>