• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

TypeScript animations.style函数代码示例

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文整理汇总了TypeScript中@angular/animations.style函数的典型用法代码示例。如果您正苦于以下问题:TypeScript style函数的具体用法?TypeScript style怎么用?TypeScript style使用的例子?那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。



在下文中一共展示了style函数的8个代码示例,这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞,您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1: trigger

import {
  animate,
  query,
  state,
  style,
  transition,
  trigger
} from '@angular/animations';

// https://stackblitz.com/edit/zen-feedback?embed=1&file=app/app.component.ts&view=preview

export const feedbackAnimation = trigger('feedbackAnimation', [
  transition(':enter', [
    query('.zen-menu', [
      style({ opacity: 0, transform: 'translateY(30px)' }),
      animate('.3s 1s ease-in-out', style({ transform: 'translateY(0)', opacity: 1 }))
    ])
  ])
]);

export const appearBottomTopAnimation = trigger('appearBottomTop', [
  state('inactive', style({ opacity: 0, visibility: 'hidden', transform: 'translateY(30px)' })),
  state('active', style({ opacity: 1, transform: 'translateY(0)' })),
  transition('inactive <=> active', animate('.3s .5s ease-in-out'))
]);

export const appearRightLeftAnimation = trigger('appearRightLeft', [
  state('inactive', style({ opacity: 0, visibility: 'hidden', transform: 'translateX(30px)' })),
  state('active', style({ opacity: 1, transform: 'translateX(0)' })),
  transition('inactive <=> active', animate('.3s .5s ease-in-out'))
]);
开发者ID:Meistercoach83,项目名称:sfw,代码行数:31,代码来源:animations.ts


示例2: trigger

  animate,
  AnimationTriggerMetadata,
  keyframes,
  state,
  style,
  transition,
  trigger,
} from '@angular/animations';

/**
 * This animation fades in the background color and text content of the
 * select's options. It is time delayed to occur 100ms after the overlay
 * panel has transformed in.
 */
export const fadeInContent: AnimationTriggerMetadata = trigger('fadeInContent', [
  state('showing', style({ opacity: 1 })),
  transition('void => showing', [
    style({ opacity: 0 }),
    animate(`150ms 100ms cubic-bezier(0.55, 0, 0.55, 0.2)`)
  ])
]);

export const slideCalendar: AnimationTriggerMetadata = trigger('slideCalendar', [
  transition('* => left', [
    animate(180, keyframes([
      style({ transform: 'translateX(100%)', offset: 0.5 }),
      style({ transform: 'translateX(-100%)', offset: 0.51 }),
      style({ transform: 'translateX(0)', offset: 1 })
    ]))
  ]),
  transition('* => right', [
开发者ID:Promact,项目名称:md2,代码行数:31,代码来源:datepicker-animations.ts


示例3: trigger

import {
  animate,
  AnimationTriggerMetadata,
  state,
  style,
  transition,
  trigger,
} from '@angular/animations';

export const TagAnimation: AnimationTriggerMetadata = trigger('tagAnimation', [
  state('*', style({ opacity: 1, transform: 'scale(1)' })),
  transition('void => *', [
    style({ opacity: 0, transform: 'scale(0)' }),
    animate('150ms linear')
  ]),
  state('void', style({ opacity: 0, transform: 'scale(0)' })),
  transition('* => void', [
    style({ opacity: 1, transform: 'scale(1)' }),
    animate('150ms linear')
  ])
])
开发者ID:afc163,项目名称:ng-zorro-antd,代码行数:21,代码来源:tag-animations.ts


示例4: style

import { animate, animation, AnimationMetadata, AnimationReferenceMetadata, style } from '@angular/animations';
import { EaseOut } from '../easings';
import { IAnimationParams } from '../main';

const base: AnimationMetadata[] = [
    style({
        opacity: `{{startOpacity}}`
    }),
    animate(
        `{{duration}} {{delay}} {{easing}}`,
        style({
            opacity: `{{endOpacity}}`
        })
    )
];

const baseParams: IAnimationParams = {
    delay: '0s',
    duration: '350ms',
    easing: EaseOut.sine,
    endOpacity: 1,
    startOpacity: 0
};

const fadeIn: AnimationReferenceMetadata = animation(base, {
    params: baseParams
});

const fadeOut: AnimationReferenceMetadata = animation(base, {
    params: {
        delay: '0s',
开发者ID:IgniteUI,项目名称:igniteui-angular,代码行数:31,代码来源:index.ts


示例5: trigger

import { trigger, state, style, animate, transition } from '@angular/animations';

export const Animations = {
    slideToggle: [
      trigger('isExpanded', [
        state('*', style({
          'height': '0',
          'overflow': 'hidden'
        })),
        state('true', style({
          'height': '*',
          'overflow': 'visible'
        })),
        transition('* => *', animate('.25s ease'))
      ])
    ]
};
开发者ID:berta-cms,项目名称:berta,代码行数:17,代码来源:animations.ts


示例6: trigger

import { trigger, stagger, transition, style, animate, query } from '@angular/animations';

export const listAnimation = trigger('listAnim', [
  transition('* => *', [
    query(':enter', style({opacity: 0}), { optional: true }),
    query(':enter', stagger(100, [
      animate('1s', style({opacity: 1}))
    ]), { optional: true }),
    query(':leave', style({opacity: 1}), { optional: true }),
    query(':leave', stagger(100, [
      animate('1s', style({opacity: 0}))
    ]), { optional: true })
  ])
]);
开发者ID:zichenma,项目名称:prodinator,代码行数:14,代码来源:list.anim.ts


示例7: trigger

/**
 * const tdRotateAnimation
 *
 * Parameter Options:
 * * degressStart: Degrees of rotation that the dom object will end up in during the "false" state
 * * degreesEnd: Degrees of rotation that the dom object will end up in during the "true" state
 * * duration: Duration the animation will run in milliseconds. Defaults to 150 ms.
 * * delay: Delay before the animation will run in milliseconds. Defaults to 0 ms.
 * * ease: Animation accelerates and decelerates. Defaults to ease-in.
 *
 * Returns an [AnimationTriggerMetadata] object with boolean states for a rotation animation.
 *
 * usage: [@tdRotate]="{ value: true | false, params: { degreesEnd: 90 }}"
 */

export const tdRotateAnimation: AnimationTriggerMetadata = trigger('tdRotate', [
  state('0', style({
    transform: 'rotate({{ degressStart }}deg)',
  }), { params: { degressStart: 0 }}),
  state('1',  style({
    transform: 'rotate({{ degreesEnd }}deg)',
  }), { params: { degreesEnd: 180 }}),
  transition('0 <=> 1', [
    group([
      query('@*', animateChild(), { optional: true }),
      animate('{{ duration }}ms {{ delay }}ms {{ ease }}'),
    ]),
  ], { params: { duration: 250, delay: '0', ease: 'ease-in' }}),
]);
开发者ID:Teradata,项目名称:covalent,代码行数:29,代码来源:rotate.animation.ts


示例8: trigger

ďťż// import the required animation functions from the angular animations module
import {AnimationTriggerMetadata, trigger, animate, transition, style } from '@angular/animations';

export const FadeInAnimation: AnimationTriggerMetadata =
    // trigger name for attaching this animation to an element using the [@triggerName] syntax
    trigger('FadeInAnimation', [

        // route 'enter' transition
        transition(':enter', [

            // css styles at start of transition
            style({ opacity: 0 }),

            // animation and styles at end of transition
            animate('.3s', style({ opacity: 1 }))
        ]),
    ]);
开发者ID:lengwei2018,项目名称:harbor,代码行数:17,代码来源:fade-in.animation.ts



注:本文中的@angular/animations.style函数示例由纯净天空整理自Github/MSDocs等源码及文档管理平台,相关代码片段筛选自各路编程大神贡献的开源项目,源码版权归原作者所有,传播和使用请参考对应项目的License;未经允许,请勿转载。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
TypeScript animations.transition函数代码示例发布时间:2022-05-28
下一篇:
TypeScript animations.state函数代码示例发布时间:2022-05-28
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap