Angular 动画实现方式和原生动画实现方式记录

最新推荐文章于 2020-07-31 04:38:05 发布

宋俊波

最新推荐文章于 2020-07-31 04:38:05 发布

阅读量626

点赞数

分类专栏：【 AngularJS +ionic 】【 HTML + CSS 】文章标签： angular 动画 ngAnimate animate

本文链接：https://blog.csdn.net/JunBo_Song/article/details/52163985

版权

本文记录了使用Angular和ngAnimate实现下拉列表动画的步骤，包括引入库、HTML和CSS的设置。同时，也探讨了原生CSS动画的实现，通过为特定class添加动画名称来实现动画效果。并推荐了两个不错的动画库，一个适用于Angular，另一个为原生动画库。

摘要由CSDN通过智能技术生成

【A】【一】用angular 和 ionic 实现下拉列表动画，效果大致如下：

【A】【二】引入 angular-animate.min.js

【A】【三】 HTML 中 (通过 ng-if 定义展示或隐藏)

       <div class="dropdownBox" ng-if="isIn" ng-click="showDropdown()">
              <div class="dropdownList">
		     <div class="dropdown__item" ng-click='filtered()'>所有任务</div>
		     <div class="dropdown__item" ng-click='filtered("{
  {one}}")' ng-repeat='one in titleArr'>{
  {one}}</div>
		</div>
	</div>

【A】【四】控制器 showDropdown 方法中控制 isIn 变量切换 true 和 false

【A】【五】CSS 样式文件中

.dropdownList {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.5s;
    transform: translateY(0);
    -webkit-transform: translateY(0);
}
/*ngAnimate CSS3 的方式(1):*/
/*支持的指令ng-if,ng-view,ng-repeat,ng-include,ng-swtich */
.dropdownBox.ng-enter{
    background-color: rgba(0, 0, 0, 0);
}
.dropdownBox.ng-enter-active {
    background-color: rgba(0, 0, 0, 0.5);
}
.dropdownBox.ng-leave {
    background-color: rgba(0, 0, 0, 0.5);
}
.dropdownBox.ng-leave-active {
    background-color: rgba(0, 0, 0, 0);
}
.dropdownBox.ng-enter .dropdownList{
    transform: