角材料：基本用法模板

我非常想在我的角度應用從Angular Materials整合基本用法模板。 角材料：基本用法模板

當點擊<>時，我非常喜歡過渡效果。

我已經在他們的網站上搜索過該指令，但沒有找到它。我設法找到的最接近的是Toolbar，但它的上角沒有圓整的方式略有不同。另外，使用簡單的ng-show，不會提供這種轉換。

有關如何實現此目的的任何建議？

來源

2016-01-23 Radu Cojocari

你可以用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>

完整的示例：http://codepen.io/kuhnroyal/pen/XXZPrE

來源

2016-01-24 12:32:52 kuhnroyal

嗨@kuhnroyal，謝謝你的例子。我試圖用你的例子。但是當我不在CSS中添加高度：200像素時，過渡不是動畫效果。切換內容僅在沒有任何動畫的情況下消失。任何想法爲什麼？ – Ravi

@Ravi因爲高度是動畫的屬性，所以如果刪除它，整個事情當然不起作用。 – kuhnroyal

如果沒有提供高度，它是否不會將元素的當前高度作爲默認高度？我想不是。但是有沒有辦法用自定義高度（自定義高度爲0，然後是0到自定義高度切換）與上面示例中的固定高度相比來管理動畫？ – Ravi

您需要實施類似於中的slideToggle()方法。 Angular Slideables指令提供了此功能。

直角是除md-toolbar指令以外實現的自定義樣式。

來源

2016-01-23 21:10:31 gnerkus

我跳了更多的東西「外的即用」。就像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>

其他的解決方案，提供了即裝即用的功能都非常歡迎。

來源

2016-01-24 11:18:32

角材料：基本用法模板

回答

相關問題