ngshow /隱藏角度使用ng點擊

我試圖創建一個小動畫，當點擊按鈕時，它會顯示一個div並隱藏，當它再次點擊。 searchPanel在css中是不透明的0，希望是一種切換效果而不是顯示/隱藏。ngshow /隱藏角度使用ng點擊

<button class="searchCtrl" ng-click="clickthis">Toggle</button> 
    <div class="searchPanel" ng-show="showthis"> 
     <form action=""> 
       <input type="text" placeholder="Enter postcodde" class="form-control input-sm mb-10"> 
       <select name="jobtype" id="" class="form-control input-sm"> 
        <option value="permanent">Permanent</option> 
        <option value="parttime">Part-time</option> 
        <option value="contract">Contract</option> 
       </select> 
     </form> 
    </div> 

.searchPanel{ 
    position: relative; 
    z-index: 0; 
    left: 0; 
    background: rgba(0, 0, 0, 0.7); 
    display: inline-block; 
    padding: 15px; 
    //opacity: 1; 
} 
button{ 
    position: relative; 
    display: block; 
}

來源

2015-10-06 MrNew

我正在使用bootstraps摺疊這種效果，https://angular-ui.github.io/bootstrap/#/collapse – klskl

什麼是'clickthis'？你應該調用一個函數。嘗試'ng-click =「clickthis（）」'也許。 – Michael

您可以使用此：

<button class="searchCtrl" ng-click="showthis=!showthis">Toggle</button>

顯示/隱藏動畫。這裏是一個pluncker：pluncker

來源

2015-10-06 08:38:34 hic1086

謝謝，有沒有辦法延遲，所以它不會彈出？我的意思是類似於轉換效果 – MrNew

你可以使用[ngAnimate]（https://docs.angularjs.org/guide/animations） –

是的，就像Denis說的你可以使用ngAnimate：這是一個plunker http://plnkr.co/編輯/ 2kflbqJntYyHdheILisD？p =預覽 – hic1086

here有一個jsFiddle與你的工作示例。你必須嘗試讀取docs爲ngClick您buttong更改爲

<button class="searchCtrl" ng-click="showThis=!showThis">Toggle</button>

。

來源

2015-10-06 08:40:14

ngshow /隱藏角度使用ng點擊

回答

相關問題