多个CSS转换

我的HTML是：多个CSS转换

<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将被放在左侧：100％然后被拉出到左侧：50％。

但它不起作用。它在第一次展开之后根本不会移动...可能会忽略转换，因为最终结果是相同的？

如何在HTML元素上应用多个CSS转换。

感谢您的帮助提前！

来源

2016-07-30 GyuHyeon Choi

你在样式声明结尾处有一个额外的括号''' – LGSon

您设定的样式的功能内openCardSetMenu，并确保函数被调用，并删除多余的右括号）中的角码都行..

来源

2016-07-30 13:09:24 Aravind

首先，删除多余的括号)在样式声明的末尾。

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

请参阅W3School中的CSS3 Transitions以获取有关转换的更多信息。

来源

2016-07-30 13:34:57 Davdriver

请不要张贴链接到W3Schools（或者根本就不使用它们），参见[here]（http://w3fools.com））作为解释 – MayorMonty

@MayorMonty确定，但在这种情况下，该页面具有良好的功能齐全的示例，可以提供帮助。 – Davdriver

问题是，由于W3Schools是私人策划的，因此它需要比[MDN]（https://developer.mozilla.org）或[Web Platform Docs]（http：//www.webplatform）更长的更新时间。 org /），它经常落后于规范 – MayorMonty

的CSS属性transitions支持多个不同性质的转变，像这样：

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

现在，如果你在一个元件上设置多个过渡，我建议你看看animation属性和设置自定义渐变效果。至于在AngularJS中实现这些，我并不是非常熟悉它，但看起来你应该使用ng-style指令

希望这对我有帮助！

来源

2016-07-30 14:07:32 MayorMonty

多个CSS转换

回答

相关问题