CSS转换立即发生

时间：2018-02-09 19:28:51

标签： jquery css

所以我试图让我的导航栏从左侧（屏幕外）向右移动（菜单按钮旁边）。麻烦的是，当我点击它两次后，我的过渡工作正在进行，第一次点击元素时，总是会立即捕捉到位置。我尝试过使用.css()和.addClass()，但结果却相同。我发现了一些其他帖子，其中人们有类似的问题，但没有一个专门处理转换持续时间。 

$(document).ready(function(){
  var firstOpen = true;
  var openMenu = false;
  $("#menu-container").click(function(){
    if(openMenu == false && firstOpen == true) // rotate menu button for cool effect
    {
      $("#centered").append("<div id = 'nav-bar-container'> </div");
      $("#nav-bar-container").append("<div id = 'home' class = 'nav-bar-button'> <span class = 'nav-button-text'> </span> </div>");
      $("#nav-bar-container").append("<div id = 'Schedules' class = 'nav-bar-button'> <span class = 'nav-button-text'> </span> </div>");
      $("#nav-bar-container").append("<div id = 'Media' class = 'nav-bar-button'> <span class = 'nav-button-text'> </span> </div>");
      $("#nav-bar-container").append("<div id = 'Membership' class = 'nav-bar-button'> <span class = 'nav-button-text'> </span> </div>");
      $("#nav-bar-container").append("<div id = 'About Us' class = 'nav-bar-button'> <span class = 'nav-button-text'> </span> </div>");
      $("#nav-bar-container").append("<div id = 'Membership' class = 'nav-bar-button'> <span class = 'nav-button-text'> </span> </div>");
      $("#menu-container").css("transform", "rotateZ(-90deg)");
      $("#nav-bar-container").addClass("translate-right")
      $("#nav-bar-container").css("transform", "translateX(20vw)");
      //$("#nav-bar-container").toggleClass("nav-bar-container-clicked");
      //$("#nav-bar-container").css("right", "100vw");
      //$("#nav-bar-container").css("right", "8vw");
      openMenu = true;
      firstOpen = false;
    }
    else if(openMenu == false && firstOpen == false)
    {
      //$("#nav-bar-container").css("right", "8vw");
      $("#nav-bar-container").css("transform", "translateX(-100vw)");
      $("#nav-bar-container").toggleClass("nav-bar-container-clicked");
      $("#menu-container").css("transform", "rotateZ(-90deg)");
      openMenu = true;
    }
    else if(openMenu == true)
    {
      $("#nav-bar-container").toggleClass("nav-bar-container-clicked");
      //$("#nav-bar-container").css("right", "100vw");
      $("#nav-bar-container").css("transform", "translateX(20vw)");
      $("#menu-container").css("transform", "rotateZ(0deg)");
      openMenu = false;
    }
  });
});
* {
  padding: 0px;
  margin: 0px;
}
html {
  height: 100vh;
  width: 100vw;
}
body {
  height: 100%;
  width: 100%;
}
#menu-container {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: absolute;
  transition: .5s;
}
#menu-background {
  position: absolute;
  top: 3vh;
  right: 3vw;
  border-radius: 15px;
  width: 6vh;
  height: 6vh;
  border: 2px;
  z-index: 5;
}
.menu-icon {
  width: 5vh;
  height: 6vh;
  background-color: purple;
  border-width: 2px;
  border-style: solid;
  border-color: purple;
  margin: 1vh;
  transition: .2s;
}
#menu-background:hover .menu-icon {
  opacity: .8;
  background-color: white;
  width: 85%;
  height: 10%;
}
#menu-background:hover {
  opacity: .8;
}
#nav-bar-container {
  position: fixed;
  width: 65vw;
  transition: .5s linear;
  z-index: 0;
  opacity: 1;
  height: 8vh;
  border: 2px;
  border-style: solid;
  border-color: purple;
  border-radius: 5px;
}
#centered {
  position: absolute;
  display: flex;
  align-items: center;
  height: 12vh;
  width: 100vw;
  z-index: 0;
}
.translate-right {
  transform: translateX(-100vw);
}
<!DOCTYPE html>
<html>
  <head>
    <link href = "style.css" rel = "stylesheet" type = "text/css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src = "animations.js"> </script>
    <script src = "velocity.js"> </script>
  </head>

  <body id = "body">
    <div id = "centered">
      <div id ="menu-background">
        <div id = "menu-container">
          <div class = "menu-icon"> </div>
          <div class = "menu-icon"> </div>
          <div class = "menu-icon"> </div>
        </div>
      </div>
    </div>
    <div class = "background-container" id = "background-container-1"> </div>
    <div class = "background-container" id = "background-container-2"> </div>
    <div class = "background-container" id = "background-container-3"> </div>

  </body>
</html>

1 个答案:

答案 0 :(得分：0)

你正试图为附加元素添加动画（顺便说一下，我不知道为什么......）。所以在第一次点击时，那些还不存在。

如果您在#nav-bar-container打开-100vw时定位20vw并在关闭时setTimeout()，则会出现轻微的逻辑反转......这种情况一直发生在我身上;）

我为要执行的第一个翻译动作添加了$(document).ready(function(){ var firstOpen=true; var openMenu=false; var menu_container=$("#menu-container"); menu_container.click(function(){ var nav_container=$("#nav-bar-container"); // rotate menu button for cool effect if(openMenu == false && firstOpen == true){ $("#centered").append("<div id='nav-bar-container' style='transform:translateX(-100vw);'> </div"); nav_container=$("#nav-bar-container"); nav_container.append("<div id='home' class='nav-bar-button'> <span class='nav-button-text'> </span> </div>"); nav_container.append("<div id='Schedules' class='nav-bar-button'> <span class='nav-button-text'> </span> </div>"); nav_container.append("<div id='Media' class='nav-bar-button'> <span class='nav-button-text'> </span> </div>"); nav_container.append("<div id='Membership' class='nav-bar-button'> <span class='nav-button-text'> </span> </div>"); nav_container.append("<div id='About Us' class='nav-bar-button'> <span class='nav-button-text'> </span> </div>"); nav_container.append("<div id='Membership' class='nav-bar-button'> <span class='nav-button-text'> </span> </div>"); setTimeout(function(){ menu_container.css("transform", "rotateZ(-90deg)"); nav_container.addClass("translate-right") nav_container.css("transform", "translateX(20vw)"); },100); openMenu=true; firstOpen=false; }else if(openMenu == false && firstOpen == false){ nav_container.css("transform", "translateX(20vw)"); nav_container.toggleClass("nav-bar-container-clicked"); menu_container.css("transform", "rotateZ(-90deg)"); openMenu=true; }else if(openMenu == true){ nav_container.toggleClass("nav-bar-container-clicked"); nav_container.css("transform", "translateX(-100vw)"); menu_container.css("transform", "rotateZ(0deg)"); openMenu=false; } }); }); ...因为附加刚刚发生。

我通过在代码中的变量asap中将它快速减少到相同元素上的jQuery查找量...但是，正如您将注意到的那样，两次，因为在第一次单击之前，它不存在。

所以这是你的更新代码，结果很好（在我看来）：

＆＃13;
＆＃13; 
*{
  padding: 0px;
  margin: 0px;
}
html{
  height: 100vh;
  width: 100vw;
}
body{
  height: 100%;
  width: 100%;
}
#menu-container{
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: absolute;
  transition: .5s;
}
#menu-background{
  position: absolute;
  top: 3vh;
  right: 3vw;
  border-radius: 15px;
  width: 6vh;
  height: 6vh;
  border: 2px;
  z-index: 5;
}
.menu-icon{
  width: 5vh;
  height: 6vh;
  background-color: purple;
  border-width: 2px;
  border-style: solid;
  border-color: purple;
  margin: 1vh;
  transition: .2s;
}
#menu-background:hover .menu-icon{
  opacity: .8;
  background-color: white;
  width: 85%;
  height: 10%;
}
#menu-background:hover{
  opacity: .8;
}
#nav-bar-container{
  position: fixed;
  width: 65vw;
  transition: .5s linear;
  z-index: 0;
  opacity: 1;
  height: 8vh;
  border: 2px;
  border-style: solid;
  border-color: purple;
  border-radius: 5px;
}
#centered{
  position: absolute;
  display: flex;
  align-items: center;
  height: 12vh;
  width: 100vw;
  z-index: 0;
}
.translate-right{
  transform: translateX(-100vw);
}
＆＃13; 
<!DOCTYPE html>
<html>
  <head>
    <link href="style.css" rel="stylesheet" type="text/css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="animations.js"></script>
    <script src="velocity.js"></script>
  </head>

  <body id="body">
    <div id="centered">
      <div id ="menu-background">
        <div id="menu-container">
          <div class="menu-icon"></div>
          <div class="menu-icon"></div>
          <div class="menu-icon"></div>
        </div>
      </div>
    </div>
    <div class="background-container" id="background-container-1"></div>
    <div class="background-container" id="background-container-2"></div>
    <div class="background-container" id="background-container-3"></div>
  </body>
</html>
＆＃13; 
MyAssembly
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题