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

最新推荐文章于 2023-05-29 23:20:02 发布
最新推荐文章于 2023-05-29 23:20:02 发布
阅读量674 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： 【 AngularJS +ionic 】 【 HTML + CSS 】 文章标签： angular 动画 ngAnimate animate
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/JunBo_Song/article/details/52163985
本文记录了使用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 下的，点我进入        原生的，点我进入


Angular Animation 动画
power0405hf的专栏
03-01 1821
动画： 从一个状态过度到另一个状态 State:定义状态 Transition:定义如何过渡 Animate函数：规定具体如何过渡，如时间，过渡的速度等 animate有多个重载形式 app.module.ts: import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; app....
Angular实现动画
weixin_33962621的博客
11-30 215
2019独角兽企业重金招聘Python工程师标准>>> ...
Angular学习笔记：动画
sinat_38393872的博客
05-29 987
Angular实现动画效果
Angular4之动画
01-19 2702
在angular里面，动画的本质，是在一定时间，由一个状态转换到另一个状态，期间的过渡效果就是显示出来就是动画。 例如： import { Component,Input } from '@angular/core'; import { trigger, state, style, animate, transition } from '@angular/animati
angularjs实现原生APP页面切换效果
前端技术博客
04-05 1010
angularjs实现原生app页面切换效果 var app = angular.module('myapp', ['ui.router', 'ngAnimate']); app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRou
AngularJS 实现JavaScript 动画效果详解
11-22
在使用JavaScript实现动画时，AngularJS并没有对CSS和JavaScript动画进行严格的区分，两者主要的区别在于定义方式。 为了在AngularJS应用中启用JavaScript动画，你需要首先确保引入了`ngAnimate`模块。例如，如果你...
聆听移动触摸手势并集成Angular动画_TypeScript_HTML_下载.zip
05-01
在现代Web开发中，触摸设备已经成为用户访问网页的常见方式，因此理解和实现移动触摸手势是至关重要的。这个压缩包文件“聆听移动触摸手势并集成Angular动画_TypeScript_HTML_下载.zip”提供了一个关于如何在Angular...
Angular 模块实现原生滑动面板效果
**创建的面板就像原生面板“可滑动”**: 这里强调了angular-swipe-panel的面板与智能手机应用程序中原生的可滑动面板外观和体验非常接近，这对于提高移动设备上的用户体验非常有帮助。 ### 描述解析 **角度滑动面板...
angular2系列之路由转场动画的示例代码
01-21
Angular2的动画系统赋予了制作各种动画效果的能力，致力于构建出与原生CSS动画性能相同的动画。 Angular2的动画主要是和@Component结合在了一起。 animations元数据属性在定义@Component装饰。就像template元...
Angular开发(二十五)-angular自带动画效果
水痕
06-07 2876
angular2中使用自带的动画一、在组件中创建一个动画import {Component,OnInit,style,trigger,state,transition,animate,keyframes} from '@angular/core';@Component({ selector: 'app-page1', templateUrl: './page1.component.html'
《Angular2入门系列实践》——实现页面动画效果
你看到的逆袭，只不过是一场预备很久，草蛇灰线，伏笔千里的反攻
07-23 2207
angular2前端工程化
Angular 2.x折腾记 ：(10) 初步了解动画，以及一步一步写个动画效果
CRPER
04-13 6120
过渡动画这东西，在现代开发中是必不可少的，死板和酷炫与之息息相关；
Angular4.0 动画
眉目成书
10-25 5846
angular4的动画
Ionic常用animation动画及使用分析
weixin_33851177的博客
01-18 548
2019独角兽企业重金招聘Python工程师标准>>> ...
【Angular】angular-animations 动画 BrowserAnimationsModule 详解
FCat
12-05 7682
为了弄懂angular的动画自己也是花了一番功夫，不客观的说，angular的动画写起来是比较复杂的，但又必须掌握。 下面是我结合官方文档的资料，自己通过实践写出来的一篇博客，希望可以帮到有需求的小伙伴，当然，如果文章有地方写的错误，欢迎指正。好了，废话不多说，开始正文吧。1：angular动画的使用需要先引入一些与动画有关的函数。import { NgModule } from '@angula
angular 动画_如何在Angular 6中使用动画
cumi7754的博客
07-31 531
angular 动画 介绍 (Introduction) Animation is defined as the transition from an initial state to a final state. It is an integral part of any modern web application. Animation not only helps us create a g...
Angular 路由转场动画
weixin_45679977的博客
01-03 1160
一、路由配置 BrowserAnimationsModule是必须要引用的 路由data属性也是必须要加的，名字可自拟 import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from...
angular2系列之动画-路由转场动画
weixin_33923762的博客
11-03 408
一.在app.mudule.ts中引入: import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 并在@NgModule中的imports添加: imports: [BrowserAnimationsModule], 二.创建文件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值