角材料:基本用法模板
我非常想在我的角度应用 从Angular Materials整合基本用法模板。 角材料:基本用法模板
当点击<>时,我非常喜欢过渡效果。
我已经在他们的网站上搜索过该指令,但没有找到它。我设法找到的最接近的是Toolbar,但它的上角没有圆整的方式略有不同。另外,使用简单的ng-show,不会提供这种转换。
有关如何实现此目的的任何建议?
你可以用angular animations这样做,它只是一些简单的CSS转换。你正在与md-toolbar
在正确的轨道上。演示使用它,你只需要设置一些CSS来围绕顶角。
md-card md-toolbar {
border-radius: 3px 3px 0 0;
}
现在添加要切换并使用就可以了ng-show
的md-toolbar
下面的一些内容。
<div class="toggle-content" ng-show="open">
The toggled content!
</div>
然后,只需检查如何使用CSS动画它ngShow文档。你想在这里制作动画是toogle-content
元素的高度。隐藏时,应用height: 0
,否则height: 200px
。
.toggle-content {
height: 200px;
background: red;
}
.toggle-content.ng-hide-add, .toggle-content.ng-hide-remove {
transition: height linear 0.5s;
}
.toggle-content.ng-hide {
height: 0;
}
当然你切换内容的工具条中需要一个md-button
。
<md-button ng-click="open = !open">
Toggle
</md-button>
您需要实施类似于中的slideToggle()
方法。 Angular Slideables指令提供了此功能。
直角是除md-toolbar
指令以外实现的自定义样式。
我跳了更多的东西“外的即用”。就像ui-bootstrap提供的手风琴一样。 –
事实证明,这是我设法找到的最适合我需要的东西。
'use strict';
angular.module('ui', ['ui.bootstrap']);
(function() {
angular.module('ui', [
"ui.bootstrap",
"ngAnimate"
]);
var module = angular.module("ui");
module.controller("controller", function($scope) {
var model = this;
model.oneAtATime = true;
model.Operators = [{
ReportItemName: "asd"
}, {
ReportItemName: "fds"
}];
});
}());
<!DOCTYPE html>
<html ng-app="ui">
<head>
<link data-require="[email protected]" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="[email protected]" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script data-require="[email protected]" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular-animate.js"></script>
<script data-require="[email protected]*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script data-require="[email protected]" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script data-require="[email protected]" data-semver="0.14.3" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap.js"></script>
<script data-require="[email protected]" data-semver="0.14.3" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller="controller as model">
<uib-accordion close-others="model.oneAtATime">
<uib-accordion-group heading="Custom template">
<uib-accordion-heading>
I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
</uib-accordion-heading>
<h1>Some Content</h1>
</uib-accordion-group>
</uib-accordion>
</div>
</body>
</html>
其他的解决方案,提供了即装即用的功能都非常欢迎。
嗨@kuhnroyal,谢谢你的例子。我试图用你的例子。但是当我不在CSS中添加高度:200像素时,过渡不是动画效果。切换内容仅在没有任何动画的情况下消失。任何想法为什么? – Ravi
@Ravi因为高度是动画的属性,所以如果删除它,整个事情当然不起作用。 – kuhnroyal
如果没有提供高度,它是否不会将元素的当前高度作为默认高度?我想不是。但是有没有办法用自定义高度(自定义高度为0,然后是0到自定义高度切换)与上面示例中的固定高度相比来管理动画? – Ravi