Javascript 代码中的多个 CSS 转换答案

【问题标题】：Multiple CSS transitions in Javascript codeJavascript 代码中的多个 CSS 转换
【发布时间】：2016-07-30 22:07:32
【问题描述】：

我的 HTML 是：

<nav id="card-set-menu-nav" ng-style="cardSetMenuNavStyle">
...
</nav>

而我使用 AngularJS 的 Javascript 代码如下：

$scope.openCardSetMenu = function(cardSet) {
    $scope.cardSetMenuNavStyle = {'transition':'0.25s', 'left':'100%')};
    $scope.cardSetMenuNavStyle = {'transition':'0.25s', 'left':'50%')};
};

我想通过改变 $scope.cardSetMenuNavStyle 变量来实现简单的侧边菜单。

HTML 元素 card-set-menu-nav 将被放在 left:100% 然后被拉到 left:50% like.

但它不起作用。第一次展开后它根本不动...也许因为最终结果相同而忽略了转换？

如何在一个 HTML 元素上应用多个 CSS 过渡。

提前感谢您的帮助！

【问题讨论】：

您的样式声明末尾有一个额外的括号 )

标签： javascript html css angularjs

【解决方案1】：

您在函数 openCardSetMenu 中设置样式并确保调用该函数并删除两行角代码中额外的右大括号 )..

【讨论】：

【解决方案2】：

首先，去掉样式声明末尾多余的括号)。

第二：你真的需要使用AngularJS吗？我认为您可以改用 CSS transition，并使用逗号和 transition-delay 属性“连接”转换。

有关转换的更多信息，请参阅 W3Schools 中的 CSS3 Transitions。

【讨论】：

请不要发布指向 W3Schools 的链接（或根本不使用它们），请参阅 here 以获得解释
@MayorMonty 好的，但在这种情况下，该页面有很好的全功能示例可以提供帮助。
问题在于，由于 W3Schools 是私人策划的，因此它的更新时间比 MDN 或 Web Platform Docs 要长得多，而且它经常落后于规范

【解决方案3】：

css transitions 属性支持多个不同属性的转换，如下所示：

element {
  transitions: 0.2s left 0.3s color 0.4s 0.8s all
}

现在，如果您在一个元素上设置多个过渡，我建议您查看animation 属性并设置自定义缓动。至于在AngularJS中实现这些，我不是很熟悉，但似乎你应该使用ng-style指令

希望这对您有所帮助！

【讨论】：