在CSS/JS动画期间激发Javascript (普通JS)

Question

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

我正在尝试创建一个在幻灯片动画过程中触发一些JS的滑出式菜单。

在页面加载时，nav固定隐藏在视口的右侧，menu固定在视口的右上角。nav比menu更宽。在menu上，单击激发nav的滑出动画。我想向nav添加一个名称空间类，用于更改menu的CSS属性。我希望在nav的可见部分的宽度与menu的宽度相等时执行此操作，此时menu将成为滑出的其余部分的nav的一部分。

我需要结合使用CSS3和vanilla JS (jQuery不可用)。我可以很容易地用CSS or JS制作nav动画，但是在menu上计时CSS属性的改变是我不能理解的。

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

我对CSS和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

您可以使用Vanilla CSS动画链接或animation-delay或 JavaScript的简单setTimeout来实现这一点

查看下面的CSS way代码。

​

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

.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;
    }
}

<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>

​

Answer 2

这实际上比我最初想象的要容易得多。实际上，通过在menu上设置一个最小宽度并允许它在滑出时“增长”到父‘`nav’的全长，就可以相当容易地解决这个问题。演示：http://codepen.io/anon/pen/EjobEJ