gpt4 book ai didi

angularjs - AngularJS中如何向上滑动和向下滑动?

转载 作者:行者123 更新时间:2023-12-02 11:29:01 28 4
gpt4 key购买 nike

我正在尝试在 AngularJS 中制作一个简单的切换示例。我面临一个问题,我需要通过一些动画(例如向上滑动和向下滑动)来显示和隐藏。我在标题上有 search 按钮,点击我显示搜索 div 它在我的 plunker 中工作。我的问题是制作动画...

其次,我需要添加 z-index 因为它会生成新层。当我点击搜索按钮“我的名字”时,搜索栏打开时会下降。为什么?

<ion-view>
<ion-header-bar align-title="" class="bar-positive">
<div class="buttons">
<i style="font-size:25px!important" class="icon-right ion-android-radio-button-off" ng-click="showsearch()"></i>

</div>
<h1 class="title">Title!</h1>
<a class="button icon-right ion-chevron-right button-calm"></a>
</ion-header-bar>
<div class="list list-inset searchclass" ng-show="isdiplay">
<label class="item item-input">
<img src="https://dl.dropboxusercontent.com/s/n2s5u9eifp3y2rz/search_icon.png?dl=0">
<input type="text" placeholder="Search">
</label>
</div>
<ion-contend>
<div style="margin-top:50px">
my name
</div>
</ion-contend>

</ion-view>

最佳答案

使用 Angular 时,您仍然有机会使用普通的旧 CSS 过渡。然而,有很多方法可以对元素进行动画处理。在我的解决方案中,我使用 ng-class 而不是 ng-show。当您单击触发器时,我会切换类active。最后,该类更改元素的状态,从而产生您想要实现的动画。

您只需将 ng-show 更改为 ng-class="{'active':isdiplay}" 并添加以下 CSS:

.searchclass {
border: 1px solid red;
margin: 0 !important;
position: relative;
top: 44px;
z-index: 9999;
-webkit-transition: height .3s ease-in-out;
transition: all .3s ease-in-out;
height: 0;
opacity: 0;
}
.searchclass.active {
height: 49px;
opacity: 1;
}

但是,正如我之前所说,您也可以将 ng-show 与模块 ngAnimate 一起使用,该模块需要包含在您自己的模块之一中。这将启用开箱即用的动画,以便可以进行动画处理的元素获得诸如 .ng-hide-remove.ng-hide-add 之类的类>.ng-hide-add-active 等。然后您可以自己设计这些类的样式。

angular.module('ionicApp', ['ionic']).controller('MyController', function($scope) {
$scope.isdiplay = false;
$scope.showsearch = function() {
$scope.isdiplay = !$scope.isdiplay;
}
})
.searchclass {
border: 1px solid red;
margin: 0 !important;
position: relative;
top: 44px;
z-index: 9999;
-webkit-transition: height .3s ease-in-out;
transition: all .3s ease-in-out;
height: 0;
opacity: 0;
}
.searchclass.active {
height: 49px;
opacity: 1;
}
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet" />
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<div ng-app="ionicApp" ng-controller="MyController">
<ion-view>
<ion-header-bar align-title="" class="bar-positive">
<div class="buttons">
<i style="font-size:25px!important" class="icon-right ion-android-radio-button-off" ng-click="showsearch()"></i>
</div>
<h1 class="title">Title!</h1>
<a class="button icon-right ion-chevron-right button-calm"></a>
</ion-header-bar>
<div class="list list-inset searchclass" ng-class="{'active':isdiplay}">
<label class="item item-input">
<img src="https://dl.dropboxusercontent.com/s/n2s5u9eifp3y2rz/search_icon.png?dl=0">
<input type="text" placeholder="Search">
</label>
</div>
<ion-contend>
<div style="margin-top:50px">
my name
</div>
</ion-contend>
</ion-view>
</div>

关于angularjs - AngularJS中如何向上滑动和向下滑动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30678648/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com