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

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