Angular

白天 夜间 首页 下载 阅读记录
  我的书签   添加书签   移除书签

16.7 - 交错动画

浏览 169 扫码 分享 2023-11-20 20:52:31
  • Angular 提供了 stagger 方法,在多个元素同时执行同一个动画时,让每个元素动画的执行依次延迟

    Angular 提供了 stagger 方法,在多个元素同时执行同一个动画时,让每个元素动画的执行依次延迟

    1. transition(":enter", [
    2. group([
    3. query("h2", [
    4. style({ transform: "translateY(-30px)" }),
    5. animate(300)
    6. ]),
    7. query("@slide", stagger(200, animateChild()))
    8. ])
    9. ])
    • 注意:stagger 方法只能在 query 方法内部使用

    若有收获,就点个赞吧

    0 人点赞

    上一篇:
    下一篇:
    • 书签
    • 添加书签 移除书签
    • Angular - 基础知识
      • Angular - 快捷指令
      • Angular - 打包部署
      • Angular - Proxy 代理
      • Angular - 目录结构
      • Anuglar - API
        • ElementRef
      • 1 - 概述
      • 2 - 架构预览
        • 2.0 - 架构预览
        • 2.1 - 模块
        • 2.2 - 组件
        • 2.3 - 服务
      • 3 - 快速开始
        • 3.1 - 创建应用
        • 3.2 - 默认代码解析
          • 3.2.1 - main.ts
          • 3.2.2 - environment.ts
          • 3.2.3 - environment.prod.ts
          • 3.2.4 - app.module.ts
          • 3.2.5 - app.component.ts
          • 3.2.6 - app-routing.module.ts
          • 3.2.7 - index.html
        • 3.3 - 共享模块
      • 4 - 组件模板
        • 4.1 - 数据绑定
        • 4.2 - 属性绑定
          • 4.2.1 - 普通属性
          • 4.2.2 - class 属性
          • 4.2.3 - style 属性
        • 4.3 - 事件绑定
        • 4.4 - 获取原生 DOM 对象
          • 4.4.1 - 在组件模板中获取
          • 4.4.2 - 在组件类中获取
        • 4.5 - 双向数据绑定
        • 4.6 - 组件内容投影
        • 4.7 - 数据绑定容错处理
        • 4.8 - 引入第三方样式
      • 5 - 指令 Directive
        • 5.1 - 指令介绍
        • 5.2 - 内置指令
          • 5.1.1 - *ngIf
          • 5.1.2 - [hidden]
          • 5.1.3 - *ngFor
        • 5.3 - 自定义指令
      • 6 - 管道 Pipe
        • 6.1 - 管道介绍
        • 6.2 - 内置管道
        • 6.3 - 自定义管道
      • 7 - 组件通讯
        • 7.1 - 父组件给子组件传值
        • 7.2 - 子组件给父组件传值
      • 8 - 组件生命周期
        • 8.0 - 生命周期预览
        • 8.1 - 挂载阶段
        • 8.2 - 更新阶段
        • 8.3 - 卸载阶段
      • 9 - 服务 Service
        • 9.1 - 创建服务
        • 9.2 - 服务的作用域
      • 10 - 依赖注入
        • 9.1 - 依赖概述
        • 9.2 - 注入服务依赖并使用
      • 11 - 表单
        • 11.1 - 模板驱动
          • 11.1.1 - 概述
          • 11.1.2 - 快速上手
          • 11.1.3 - 表单验证
        • 11.2 - 模型驱动
          • 11.2.1 - 概述
          • 11.2.2 - 快速上手
          • 11.2.3 - FormArray
          • 11.2.4 - 内置表单验证器
          • 11.2.5 - 自定义同步表单验证器
          • 11.2.6 - 自定义异步表单验证器
          • 11.2.7 - FormBuilder
          • 11.2.8 - 练习
          • 11.2.9 - 其他
      • 12 - 路由
        • 12.1 - 概述
        • 12.2 - 快速上手
        • 12.3 - 匹配规则
          • 12.3.1 - 重定向
          • 12.3.2 - 404 页面
        • 12.4 - 路由传参
          • 12.4.1 - query 传参
          • 12.4.2 - params 传参
        • 12.5 - 路由嵌套
        • 12.6 - 命名插座
        • 12.7 - 导航路由
        • 12.8 - 路由模块
        • 12.9 - 路由懒加载
        • 12.10 - 路由守卫
          • 12.10.1 - 概述
          • 12.10.2 - CanActivate
          • 12.10.3 - CanActivateChild
          • 12.10.4 - CanDeactivate
          • 12.10.5 - Resolve
      • 13 - RxJs 响应式编程
        • 13.1 - 概述
        • 13.2 - 快速入门
        • 13.3 - 可观察对象
          • 13.3.1 - Observable
          • 13.3.2 - Subject
          • 13.3.3 - BehaviorSubject
          • 13.3.3 - ReplaySubject
        • 13.4 - 辅助方法
          • 13.4.1 - range
          • 13.4.2 - of
          • 13.4.3 - from
          • 13.4.4 - interval、timer
          • 13.4.5 - concat
          • 13.4.6 - merge
          • 13.4.7 - combineLatest
          • 13.4.8 - zip
          • 13.4.9 - forkJoin
          • 13.4.10 - throwError
          • 13.4.11 - retry
          • 13.4.12 - race
          • 13.4.13 - fromEvent
        • 13.5 - 操作符
          • 13.5.0 - 概述
          • 13.5.1 - map、mapTo
          • 13.5.2 - filter
          • 13.5.3 - pluck
          • 13.5.4 - first
          • 13.5.5 - startWith
          • 13.5.6 - every
          • 13.5.7 - delay、delayWhen
          • 13.5.8 - take、takeWhile、takeUtil
          • 13.5.9 - skip、skipWhile、skipUntil
          • 13.5.10 - last
          • 13.5.11 - concatAll、concatMap
          • 13.5.12 - reduce、scan
          • 13.5.13 - mergeAll、mergeMap
          • 13.5.14 - throttleTime
          • 13.5.15 - debounceTime
          • 13.5.16 - distinctUntilChanged
          • 13.5.17 - groupBy
          • 13.5.18 - withLatestFrom
          • 13.5.19 - switchMap
        • 13.6 - 练习
          • 13.6.1 - 元素拖拽
          • 13.6.2 - 搜索
          • 13.6.3 - 串联请求
      • 14 - HttpClient - 数据请求
        • 14.0 - 概述
        • 14.1 - 快速开始
        • 14.2 - 请求方法
        • 14.3 - 请求参数
        • 14.4 - 请求头
        • 14.5 - 响应内容
        • 14.6 - 拦截器
          • 14.6.0 - 概述
          • 14.6.1 - 请求拦截
          • 14.6.2 - 响应拦截
          • 14.6.3 - 拦截器注入
      • 15 - NgRx - 全局状态
        • 15.1 - 概述
        • 15.2 - 快速开始
        • 15.3 - Action Payload
        • 15.4 - MetaReducer
        • 15.5 - Effect
        • 15.6 - Entity
          • 15.6.1 - 概述
          • 15.6.2 - 核心
          • 15.6.3 - 实例方法
          • 15.6.4 - 选择器
        • 15.7 - Router Store
          • 15.7.1 - 同步路由状态
          • 15.7.2 - 创建获取路由状态的 Selector
      • 16 - 动画
        • 16.1 - 状态
          • 16.6.1 - 什么是状态
          • 16.6.2 - 状态的种类
          • 16.6.3 - 进出场动画
        • 16.2 - 快速上手
        • 16.3 - 关键帧动画
        • 16.4 - 动画回调
        • 16.5 - 创建可重用动画
        • 16.6 - 查询元素执行动画
        • 16.7 - 交错动画
        • 16.8 - 自定义状态动画
        • 16.9 - 路由动画
    • Angular - 常用插件
      • minireset.css - 重置css
      • PC 端组件 UI 库
    暂无相关搜索结果!

      让时间为你证明

      展开/收起文章目录

      分享,让知识传承更久远

      文章二维码

      手机扫一扫,轻松掌上读

      文档下载

      请下载您需要的格式的文档,随时随地,享受汲取知识的乐趣!
      PDF文档 EPUB文档 MOBI文档

      书签列表

        阅读记录

        阅读进度: 0.00% ( 0/0 ) 重置阅读进度

          思维导图备注