【A】【一】用angular 和 ionic 实现下拉列表动画,效果大致如下:
【A】【二】 引入 angular-animate.min.js
【A】【三】 HTML 中 (通过 ng-if 定义展示或隐藏)
所有任务
{{one}}
【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%{
-webkit-transform: translate3d(0,50%,0);opacity: 0;
-moz-transform: translate3d(0,50%,0);
-ms-transform: translate3d(0,50%,0);
transform: translate3d(0,50%,0);
}
100%{
-webkit-transform: translate3d(0,0,0);opacity: 1;
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
}
@keyframes slowTop {
0%{
-webkit-transform: translate3d(0,50%,0);opacity: 0;
-moz-transform: translate3d(0,50%,0);
-ms-transform: translate3d(0,50%,0);
transform: translate3d(0,50%,0);
}
100%{
-webkit-transform: translate3d(0,0,0);opacity: 1;
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
}
/* 下 */
@-webkit-keyframes slowBotton {
0%{
-webkit-transform: translate3d(0,-50%,0);opacity: 0;
-moz-transform: translate3d(0,-50%,0);
-ms-transform: translate3d(0,-50%,0);
transform: translate3d(0,-50%,0);
}
100%{
-webkit-transform: translate3d(0,0,0);opacity: 1;
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
}
@keyframes slowBotton {
0%{
-webkit-transform: translate3d(0,-50%,0);opacity: 0;
-moz-transform: translate3d(0,-50%,0);
-ms-transform: translate3d(0,-50%,0);
transform: translate3d(0,-50%,0);
}
100%{
-webkit-transform: translate3d(0,0,0);opacity: 1;
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
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 下的,点我进入 原生的,点我进入