Question

编辑：这是我正在尝试做的一个示例：http://codepen.io/anon/pen/OVzOjW （请注意，菜单和导航不完全对齐，因为导航过渡由CSS控制，菜单延迟由JS控制。）

我正在尝试创建一个滑动菜单，在幻灯片动画期间触发一些JS。

在页面加载时，nav隐藏在视口右侧，menu固定在视口的右上角。 nav比menu宽。menu。在nav点击后会触发nav的幻灯片动画。我想向CSS添加名称空间类，以更改menu的{{1}}属性。我想在nav的可见部分宽度与menu的宽度相等的时刻执行此操作，此时menu将成为导航的一部分其余部分。

我需要使用CSS3和vanilla JS的某种组合（jQuery不可用）来执行此操作。我可以使用nav轻松完成CSS or JS动画，但是menu上的CSS属性更改计时是我无法弄清楚的。

我尝试编写一个循环，不断评估nav的正确属性值以查看if it's >= the width of menu（使用CSS进行转换），但这似乎会立即触发整个循环

我对动画本身的CSS vs JS解决方案并不挑剔，但我更喜欢CSS，因为我觉得控制转换设置更容易，而且运行更顺畅。

以下相关代码。任何帮助将不胜感激！

HTML：

<nav id="nav">
  <a id="menu" href="#">Menu</a>
  <a href="#">Foo</a>
  <a href="#">Foo</a>
  <a href="#">Foo</a>
</nav>

CSS：

#nav {
  position: fixed;
  right: -100px;
  top: 0;
  width: 100px;
}

#nav.expanded-nav {
  right: 0;
}

#nav.expanded-menu #menu {
  position: absolute;
  right: auto;
  top: auto;
  width: 100%;
}

#menu {
  position: fixed;
  right: 0;
  top: 0;
  width: 50px;
}

Answer 1

您可以使用 CSS动画链接或animation-delay或简单setTimeout的Vanilla JavaScript

进行此操作

查看下面的CSS方式代码..

＆＃13;

$("#go").click(function() {
        $(".container").addClass("demo");
});

＆＃13;

.container {position: relative;}

#nav, #menu {
    height: 100px; 
    width: 100px; 
    position: absolute;
}

#nav {
  top: 10px;
  left:-100px;
  background: #000;
  }
#menu {
  top: 150px;
  left:200px;
  background: #f00;
  }
    
.demo #nav {
    -webkit-animation: demo 1s, demo1 2s;
    -webkit-animation-delay: 0s, 1s;
    -webkit-animation-timing-function: ease-in-out;
}  

.demo #menu {
    -webkit-animation: demo1 2s;
    -webkit-animation-delay: 1s;
    -webkit-animation-timing-function: ease-in-out;
}  

@-webkit-keyframes demo {
    0% {
        left: -100px;
    }
    100% {
        left: 200px;
    }
}

@-webkit-keyframes demo1 {
    0% {
        left: 200px;
    }
    100% {
        left: 300px;
    }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="go">Go</button>
<div class="container">
    <div id="nav"></div>
  <div id="menu"></div>
</div>

＆＃13;

Answer 2

这实际上比我最初的想法容易。实际上可以通过在menu上设置最小宽度并允许它在滑出时“增长”到父“nav”的全长来轻松解决。在这里演示：http://codepen.io/anon/pen/EjobEJ

在CSS / JS动画期间消防Javascript（vanilla JS）

2 个答案: