html - ngshow/hide angular 使用 ng-click

Question

我试图在单击按钮时创建一个小动画，它将显示一个 div 并在再次单击时隐藏。 searchPanel 在 css 中的不透明度为 0 希望切换效果而不是显示/隐藏。

<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;
}

Answer 1

here您的工作示例有一个 jsFiddle。您只需要将按钮更改为

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

尝试阅读 docs对于 ngClick。