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点击

回答

相关问题