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

来源：互联网发布：js倒计时10秒代码编辑：程序博客网时间：2024/05/29 02:17

【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 下的，点我进入原生的，点我进入

0 0