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

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


【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: translate3d(0,-100%,0);
    -webkit-transform: translate3d(0,-100%,0);
}
.dropdownBox.ng-enter-active .dropdownList{
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
}
.dropdownBox.ng-leave .dropdownList{
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
}
.dropdownBox.ng-leave-active .dropdownList{
    transform: translate3d(0,-100%,0);
    -webkit-transform: translate3d(0,-100%,0);
}






/*ngAnimate CSS3 的方式(2):*/
/*支持的指令ng-class,ng-show,ng-hide,ng-model */
.dropdownBox.ng-hide-add{
    background-color: rgba(0, 0, 0, 0.5);
    
}
.dropdownBox.ng-hide-add-active {
    background-color: rgba(0, 0, 0, 0);
}
.dropdownBox.ng-hide-remove {
    background-color: rgba(0, 0, 0, 0);
}
.dropdownBox.ng-hide-remove-active{
    background-color: rgba(0, 0, 0, 0.5);
}
.dropdownBox.ng-hide-add .dropdownList{
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
}
.dropdownBox.ng-hide-add-active .dropdownList{
     transform: translate3d(0,-100%,0);
    -webkit-transform: translate3d(0,-100%,0);
   
}
.dropdownBox.ng-hide-remove .dropdownList{
     transform: translate3d(0,-100%,0);
    -webkit-transform: translate3d(0,-100%,0);
}
.dropdownBox.ng-hide-remove-active .dropdownList{
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
}


【B】【一】原生动画实现方式记录

【B】【二】 CSS 中为class 为 ct_img 的标签通过动画名称 slowTop 添加动画

.ct_img{text-align: center;margin-top: 270px;margin-bottom: 78px;opacity: 0;-webkit-animation:slowTop 0.5s both;animation:slowTop 0.5s both;}

@-webkit-keyframes slowTop {
     0%{
<span style="white-space:pre">	</span>-webkit-transform: translate3d(0,50%,0);opacity: 0;
<span style="white-space:pre">	</span>-moz-transform: translate3d(0,50%,0);
<span style="white-space:pre">	</span>-ms-transform: translate3d(0,50%,0);
<span style="white-space:pre">	</span>transform: translate3d(0,50%,0);
<span style="white-space:pre">	</span>}
     100%{
<span style="white-space:pre">	</span>-webkit-transform: translate3d(0,0,0);opacity: 1;
<span style="white-space:pre">	</span>-moz-transform: translate3d(0,0,0);
<span style="white-space:pre">	</span>-ms-transform: translate3d(0,0,0);
<span style="white-space:pre">	</span>transform: translate3d(0,0,0);
        }
     }
@keyframes slowTop {
     0%{
<span style="white-space:pre">	</span>-webkit-transform: translate3d(0,50%,0);opacity: 0;
<span style="white-space:pre">	</span>-moz-transform: translate3d(0,50%,0);
<span style="white-space:pre">	</span>-ms-transform: translate3d(0,50%,0);
<span style="white-space:pre">	</span>transform: translate3d(0,50%,0);
      }
     100%{
<span style="white-space:pre">	</span>-webkit-transform: translate3d(0,0,0);opacity: 1;
<span style="white-space:pre">	</span>-moz-transform: translate3d(0,0,0);
<span style="white-space:pre">	</span>-ms-transform: translate3d(0,0,0);
<span style="white-space:pre">	</span>transform: translate3d(0,0,0);
       }
     }


/* 下 */
@-webkit-keyframes slowBotton {
     0%{
<span style="white-space:pre">	</span>-webkit-transform: translate3d(0,-50%,0);opacity: 0;
<span style="white-space:pre">	</span>-moz-transform: translate3d(0,-50%,0);
<span style="white-space:pre">	</span>-ms-transform: translate3d(0,-50%,0);
<span style="white-space:pre">	</span>transform: translate3d(0,-50%,0);
      }
     100%{
<span style="white-space:pre">	</span>-webkit-transform: translate3d(0,0,0);opacity: 1;
<span style="white-space:pre">	</span>-moz-transform: translate3d(0,0,0);
<span style="white-space:pre">	</span>-ms-transform: translate3d(0,0,0);
<span style="white-space:pre">	</span>transform: translate3d(0,0,0);
      }
     }
@keyframes slowBotton {
     0%{
<span style="white-space:pre">	</span>-webkit-transform: translate3d(0,-50%,0);opacity: 0;
<span style="white-space:pre">	</span>-moz-transform: translate3d(0,-50%,0);
<span style="white-space:pre">	</span>-ms-transform: translate3d(0,-50%,0);
<span style="white-space:pre">	</span>transform: translate3d(0,-50%,0);
      }
    100%{
<span style="white-space:pre">	</span>-webkit-transform: translate3d(0,0,0);opacity: 1;
<span style="white-space:pre">	</span>-moz-transform: translate3d(0,0,0);
<span style="white-space:pre">	</span>-ms-transform: translate3d(0,0,0);
<span style="white-space:pre">	</span>transform: translate3d(0,0,0);
      }
     }


@-webkit-keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }


  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }


  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }


  90% {
    -webkit-transform: translate3d(0,-4px,0);
    transform: translate3d(0,-4px,0);
  }
}


@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }


  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }


  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }


  90% {
    -webkit-transform: translate3d(0,-4px,0);
    transform: translate3d(0,-4px,0);
  }
}

【B】【三】




两个不错的动画库     angular 下的,点我进入        原生的,点我进入


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值