当前位置: 首页 > 编程笔记 >

angular2系列之路由转场动画的示例代码

南宫书
2023-03-14
本文向大家介绍angular2系列之路由转场动画的示例代码,包括了angular2系列之路由转场动画的示例代码的使用技巧和注意事项,需要的朋友参考一下

Angular2的动画系统赋予了制作各种动画效果的能力,致力于构建出与原生CSS动画性能相同的动画。

Angular2的动画主要是和@Component结合在了一起。

animations元数据属性在定义@Component装饰。就像template元数据属性!这样就可以让动画逻辑与其应用代码紧紧集成在一起,这让动画可以更容易的出发与控制。

一.在app.mudule.ts中引入:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

并在@NgModule中的imports添加:

imports: [BrowserAnimationsModule],

二.创建文件定义名为animations.ts用来书写转场动画

import { animate, AnimationEntryMetadata, state, style, transition, trigger } from'@angular/core';
// Component transition animations
export const slideInDownAnimation: AnimationEntryMetadata =
// 动画触发器名称
trigger('routeAnimation', [
  state('*',
    style({
      opacity: 1,
      transform: 'translateX(0)'
    })
  ),
  transition(':enter', [
    style({
      opacity: 0,
      transform: 'translateX(-100%)'
    }),
    animate('0.2s ease-in')
  ]),
  transition(':leave', [
    animate('0.5s ease-out', style({
      opacity: 0,
      transform: 'translateY(100%)'
    }))
  ])
]);

三.在需要添加转场动画的页面操作

引入import {HostBinding } from '@angular/core';(如果引入过直接将HostBinding添加进去就好,不要重复引入,多嘴了...)

再引入你写好的动画模板:import { slideInDownAnimation } from '../animation';

在@Component中添加:animations:[slideInDownAnimation],

最后:

  // 添加@HostBinding属性添加到类中以设置这个路由组件元素的动画和样式
  @HostBinding('@routeAnimation') routeAnimation = true;
  @HostBinding('style.display') display = 'block';
  @HostBinding('style.position') position = 'absolute';

四.至此你可以去浏览器看看效果了,如果没有错误

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍Android5.0之Activity的转场动画的示例,包括了Android5.0之Activity的转场动画的示例的使用技巧和注意事项,需要的朋友参考一下 Activity的转场动画很早就有,但是太过于单调,样式也不好看,于是Google在Android5.0之后,又推出的新的转场动画,效果还是非常炫的,今天我们一起来看一下。 1.旧转场动画回顾 首先我们还是先来看看在5.0之前如

  • 对于普通用户来说,是关注一个应用本身、还是更关注这个应用的元素从 A 点到 B 点转变的过程,这种选择往往有些难。谨慎编排的动画可以在有多步操作的过程中有效地引导用户的注意力;在版面变化或元素重组时避免造成困惑;提高用户体验的整体美感。动画设计不仅应当优美,更应当服务于功能。 示例 示例 示例 1: 示例 2: 视觉连贯性 在两个视觉效果不同的页面之间的转场应该平滑、轻快,更重要的是使用户感觉清晰

  • 本文向大家介绍Vue2路由动画效果的实现代码,包括了Vue2路由动画效果的实现代码的使用技巧和注意事项,需要的朋友参考一下 这篇文章主要讲的是路由切换的时候动画效果的实现,可以根据不同的路径去改变动画的效果,以下就是源码,可供参考: 路由的api链接在这,详细的可以去看这https://router.vuejs.org/zh-cn/advanced/transitions.html 以上就是本文的

  • 本文向大家介绍AngularJS监听路由的变化示例代码,包括了AngularJS监听路由的变化示例代码的使用技巧和注意事项,需要的朋友参考一下 话不多说,我们下面直接来看实现的示例代码 【一】Angular 路由状态发生改变时可以通过' $stateChangeStart '、' $stateChangeSuccess '、' $stateChangeError '监听,通过注入'$locatio

  • 本文向大家介绍Vue三层嵌套路由的示例代码,包括了Vue三层嵌套路由的示例代码的使用技巧和注意事项,需要的朋友参考一下 Vue嵌套路由: 实现效果(路由三层嵌套,点击一级tab显示二级tab效果,二级tab点击切换对应内容,不在tab区域里的内容,切换时不重复渲染): Demo访问时路径:http://IP:端口/#/routers/ 1.建立案例文件夹 page/routers/ 1 route

  • 动画、时间轴事件监听 本文将向您介绍如何使用 BindingX 来实现动画。如果您还不了解 BindingX 的工作原理,强烈建议先阅读文档 《简介》以及 《核心概念》。 特性介绍 要在 BindingX 中使用动画,需要将eventType的值设置为 timing 。在timing模式下, BindingX 提供了一个预置变量叫 t ,可以参与表达式运算,它代表的含义是动画流逝的时间,从0开始,