如何在Angular中使用参数定义动画
在Angular中使用参数定义动画可以通过以下步骤实现：
- 首先，确保已经安装了Angular动画模块。可以通过在终端中运行以下命令来安装它：
- 首先，确保已经安装了Angular动画模块。可以通过在终端中运行以下命令来安装它：
- 在Angular应用的根模块（通常是app.module.ts）中导入动画模块：
- 在Angular应用的根模块（通常是app.module.ts）中导入动画模块：
- 在组件中定义动画参数。可以使用Angular的动画元数据装饰器
@Component中的animations属性来定义动画参数。例如，我们可以定义一个名为fade的动画参数，其中包含一个名为opacity的参数： - 在组件中定义动画参数。可以使用Angular的动画元数据装饰器
@Component中的animations属性来定义动画参数。例如，我们可以定义一个名为fade的动画参数，其中包含一个名为opacity的参数： - 在上面的示例中，我们定义了一个名为
fade的动画参数，它具有两个状态：void和默认状态。void状态表示元素不在DOM中，而默认状态表示元素在DOM中并具有默认样式。 - 在模板中使用动画参数。可以使用Angular的动画指令来应用动画参数。在模板中，可以使用
[@triggerName]语法将动画参数应用于元素。例如，我们可以将之前定义的fade动画参数应用于一个div元素： - 在模板中使用动画参数。可以使用Angular的动画指令来应用动画参数。在模板中，可以使用
[@triggerName]语法将动画参数应用于元素。例如，我们可以将之前定义的fade动画参数应用于一个div元素： - 在上面的示例中，当
div元素进入或离开DOM时，将应用fade动画参数。
以上就是在Angular中使用参数定义动画的步骤。请注意，这只是一个简单的示例，你可以根据实际需求定义更复杂的动画参数。如果你想了解更多关于Angular动画的详细信息，可以参考腾讯云的Angular动画文档：Angular动画文档。
相关·内容
在Angular中有一个导出动画触发器的example： import { animation, style, animate, trigger, transition, useAnimation } from '@angular/animations';
export const triggerAnimation = trigger('openClose', [
transition('open => closed', [
useAnimation(transitionAnimation, {
params: {
浏览 20提问于2021-07-12得票数 0
回答已采纳
我无法在app.module.shared文件中导入@angular/animations：
当我在app.module.browser文件中导入@angular/animations时，动画不起作用。
在angular asp.net Core2模板中使用材质动画需要做什么？
浏览 1提问于2017-09-26得票数 1
1回答
下拉菜单与表单中的其他输入重叠
、、、、
我正在开发一个使用Angular、语义UI和动画的应用程序。
我正在创建一个表单，当它打开时，我遇到了与其他输入重叠的下拉列表问题。
这里有一个插入器：
正如您所看到的，从语义UI类中删除animated fadeIn动画fields解决了这个问题。
那么，我该怎么做才能同时使用语义UI和动画，并让下拉菜单不出现bug呢？
浏览 15提问于2017-07-20得票数 1
回答已采纳
2回答
如何让动画在删除Angular2中的dom元素时触发？
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { FormGroup, FormControl, Validators } from "@angular/forms";
import {
trigger,
state,
style,
animate,
transition
} from '@angular/animations';
import { Serv
浏览 0提问于2017-06-12得票数 0
我有一件事
angular.module('MyApp.routing', []).
config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider
.when("/",
{action: "home"})
.when("/calculator/:slug/:docId/:versionId
浏览 2提问于2013-09-13得票数 0
回答已采纳
1回答
请有人指点我在安卓和iOS应用程序中实现这一效果的正确方向。不一定有这种效果，但您会注意到，两个屏幕(列表和详细信息)之间的转换是以非标准方式进行的(图像放大)。
这样做的目的是在两个屏幕之间执行一个动画，这样在动画完成后，路径就会改变，后端服务也会启动等等。不知道我是否正确地表达了自己，但是我如何用定制的动画“交换”本地屏幕的转换呢？并根据具体情况来进行，而不是将其作为所有转换的一般规则。
我正在使用Angular2和Nativescript。
--
编辑:如果上面的解决方案看起来像一个黑客，它是好的，它不需要支持的盒子。为了澄清，是否有可能：
捕获和防止默认单击操作，从而防止本机转换。
浏览 2提问于2017-03-01得票数 3
嗨，我真的是Angular2的新手(我知道angular2提供的大多数概念)，在选择了一些选项后，我在获取特定数据时遇到了问题。
目前，我有假的数据库，并在数据库中创建了一些随机的人的个人资料。
我有带下拉选项的组件。我希望用户选择其中一个选项，一旦他们完成选择，我希望他们点击“完成”按钮。
一旦他们这样做了，他们将被重定向到另一个组件，该组件显示与他们的选择相对应的数据。
我猜我需要将用户选择的数据存储到服务中，并且这两个组件(一个带有选项的组件，另一个带有基于用户选择的信息列表)之间的通信应该利用该服务。
但我不知道该怎么做。我们将非常感谢您的帮助！谢谢!
浏览 6提问于2017-03-02得票数 0
回答已采纳
我想在Angular 4组件中设置svg的动画效果。如何在svg组件中获取不同的I并按顺序对其进行动画处理？
我可以通过单击事件在svg的单个元素上触发单个动画，但如何在页面加载时触发此操作？
我有以下component.ts代码：
import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
import { trigger, state, style, transition, animate, keyframes } from
浏览 1提问于2017-08-02得票数 0
我目前正在做一个Angular 2项目。
该项目是使用angular-cli v1.0.0-beta.15生成的。
我现在正在考虑实现一个可重用的指令来触发特定的动画。由于目前缺少这方面的文档，有没有人有办法实现这一点？
浏览 5提问于2016-09-25得票数 0
如何在完成动画添加className后在angular中回调函数
下面是我的代码：
var myApp = angular.module('myApp', []);
myApp.controller('count', function($scope) {
$scope.animate = function () {
$('h2').addClass('fade'); //adding animation 1s
//opcity done how to put a call back?
浏览 2提问于2015-06-13得票数 1
我正在用angular-strap创建一个模型
当我在标记中创建一个模式时，动画的工作方式与预期一样。下面是一个示例：
<a href="" bs-modal="settings.deleteAccountModal" data-animation="am-fade-and-slide-top" data-template="js/donor/settings/confirm-modal.html" class="trashOut"></a>
但是当我尝试用$modalService创建相同
浏览 1提问于2014-09-24得票数 0
回答已采纳
我读了角动画文档并重新创建了演示。如果单击Fold In按钮，文本将更改为animate define。演示不太好。动画不太好用。
这是我的代码：
在网络风暴中：
我将var app = angular.module('app', []);改为var app = angular.module('app', ['ngAnimate']);。错误显示：
Uncaught Error: [$injector:unpr] Unknown provider: $$isDocumentHiddenProvider <- $$isDocumentHidd
浏览 12提问于2016-12-29得票数 5
回答已采纳
你能指导我如何在Angular2中创建一个相当于jQuery 和的自定义动画吗？我知道我可以使用jQuery插件来做这件事，但是很多人建议我不要使用它。因此，我正在寻找一种替代方法来创建这些动画。slideUp和slideDown将使任何div在单击某个按钮时都可以使用平滑动画进行折叠。
浏览 28提问于2017-08-07得票数 3
我正在尝试使我的动画标题改变，这取决于对象当前是否正在被动画。例如，当mario对用户的点击进行动画时，它应该显示为“他正在行走”，一旦他到达目的地，它应该显示为“他站着不动”。根据我对complete应用编程接口文档的理解，jQuery属性应该负责这一点。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
<link rel="stylesheet" ty
浏览 2提问于2013-10-02得票数 0
2回答
我正在做一个Ionic3/ angular 4应用程序，我用角度动画把东西移动到我的屏幕上，一切都正常，除了在动画的末尾，div重置到它原来的位置，而不是停留在动画结束的最后一个位置，
我知道，在CSS中，您只需在动画中添加“转发”，它就会停留在那里，但是如何在组件中实现呢？
PageCode：
transition('* => move',
animate('2500ms', keyframes([
style({ transform: 'translateX(0)', offset: 0 }),
浏览 1提问于2018-10-29得票数 0
回答已采纳
我想弄明白为什么我不能解决所有参数.向构造函数添加属性时出错。我似乎经常遇到这个错误，所以我相信我对这个错误的工作方式有一个根本的误解。
注意，我已经阅读了关于依赖注入的角度指南，但这似乎没有涵盖我的用例。我要做的具体工作是向组件中添加一个动画，因此我将遵循以下指南：。
下面的代码起作用了：(从某种意义上说，它不会爆炸)
import { Component, OnInit } from '@angular/core';
import { trigger, state, style, animate, transition } from '@angular/animat
浏览 2提问于2018-02-01得票数 0
回答已采纳
1回答
在我的角组件中，一个表将逐行显示，然后等待几秒钟，移除表线并显示下一行。到目前为止效果很好。
但现在我对动画有两个“小”问题：
我需要插入一个“等待”(请参阅下面的代码)，以确保前面的:leave已经完成。否则，新行的打印将与删除旧行重叠。现在的问题是，这种“等待”也适用于第一次运行。如何避免“等待”在第一次运行时被调用？或者有另外一种方法来确保一个新的动画只有在其他动画已经完成时才会启动(然后我可以删除这个“等待”)？
这里有一个工作演示，
import { trigger, transition, style, animate, query, stagger, stat
浏览 5提问于2021-01-07得票数 0
回答已采纳
2回答
我对相同组件路径的动画有问题。就像。我有一条路线：
{路径：“产品/类别/:类别”，组件: CategoryComponent}，
首先，我解决了路由参数的问题，因为当我在同一组件之间导航时，它们不会刷新ngOnit()函数。但是现在我已经在我的应用程序中添加了动画，如果我从HomeComponent到CategoryComponent的话，它的工作非常完美。但是，如果我用不同的参数从CategoryComponent转到CategoryComponent，动画就不能工作。
在这里，我的动画文件：
import { animate, AnimationEntryMetadata, st
浏览 2提问于2017-08-28得票数 4
1回答
我正在尝试使用一个简单的旋转动画。我完成了样式，但它是立即发生的，没有任何实际的动画。
HTML：
<img class="icon" [@rotation]="liked? 'rotate' : 'straight'" (click)="liked = ! liked" src="mySource"/>
TS：
import { Component, OnInit, Input } from '@angular/core';
import {trigger, state
浏览 7提问于2020-02-14得票数 1
我不得不制作一个自定义动画队列来为我的动画设置时间线。
有没有办法从fx队列中删除预定义的slideUp()或slideDown()动画？我知道您在使用animate()时使用了queue:false，但是可以使用预定义的动画吗？
浏览 1提问于2011-08-11得票数 2
回答已采纳
如何使Angular Material 2对话框具有动画效果？
我尝试使用正常的角度2+动画理论。它可以工作，但发生的是对话框上的元素被动画(正如预期的那样)，而对话框只是停留在原处。但我想要的是对话框本身应该有动画效果，例如，不透明度应该在几秒钟内从1变为0。
我还检查了MdDialog.close()方法是否有任何动画选项，但似乎什么都没有。
将对话框的不透明度从1动画到0(例如，在关闭对话框之前)是一种常见的用例，我如何使用Angular Material 2对话框来实现它？
浏览 19提问于2017-07-26得票数 4
1回答
我有一个NavigationView，它管理应用程序中几个不同Frame布局的导航。这样，用户就可以在不同的导航堆栈上切换到应用程序的另一部分，然后返回到原来的框架，并保持原来的状态。
我已经设置了每个帧来播放导航动画，如下所示：
<Frame x:Name="UserFrame">
<Frame.ContentTransitions>
<TransitionCollection>
<NavigationThemeTransition/>
</Transitio
浏览 1提问于2018-02-21得票数 1
回答已采纳
有很多相关的问题，但这种情况似乎没有通过任何现有的问题来解决。
我已经创建了一个带有自定义层的视图，以便可以对其中一个属性进行动画处理。使用CABasicAnimation类，动画可以正常工作。
但是，我需要更多地控制动画，比如缓入缓出和顺序动画，并尝试切换到使用块动画。然而，当我这样做时，动画立即完成，而不是随着时间的推移而动画。
我怎样才能让这个块动画正常工作？
工作动画代码：
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"inputValue"];
animation.dura
浏览 2提问于2014-10-17得票数 2
我现在正在学习angular，我已经尝试在Angular网站上从示例中添加一些动画到基本项目中。这里有一些代码示例，我不知道应该在app.component.ts文件的// animation triggers go here下输入什么。我试着添加动画：[trigger('openClose')]，但它什么也没改变。这个例子来自angular网站：非常感谢你的回答！
import { Component } from '@angular/core';
import {
trigger,
state,
style,
animate,
transition
} fr
浏览 7提问于2019-07-29得票数 0
我想在地图上添加多个引脚，这些引脚应该连续保持动画效果。下面是我想用作Pin的示例图像，
有没有可能在MapKit中获得这种类型的动画图钉？如果可能的话，请给我建议合适的方法。
浏览 0提问于2013-05-28得票数 4
回答已采纳
我正在使用AngularJS路由，并尝试了解如何使用查询字符串(例如，url.com?key=value)。Angular不理解包含同名albums的键值对的路由
angular.module('myApp', ['myApp.directives', 'myApp.services']).config(
['$routeProvider', function($routeProvider) {
$routeProvider.
when('/albums
浏览 0提问于2013-03-01得票数 36
回答已采纳
4回答
我正在尝试制作一个简单的动画，就像下面简单的jQuery
animate({'left' : left_indent})
我正在使用Angular2动画，但问题是如何将组件类之外的left_indent参数传递给动画触发器？
animations: [
trigger('flyInOut', [
state('for', style({
left: this.left_indent,
})),
transition('* => for', [
浏览 5提问于2017-01-31得票数 43
回答已采纳
2回答
我有一个Angular2应用程序，我试图添加一个动画到我的路由，所以它幻灯片时，我改变页面。输入的动画工作良好，但离开动画不激活，前一页只是消失后，新页加载。有人知道这个问题的原因吗？
根据，我认为我的转换是正确的。
// transition(':enter', [ ... ]); // void => *
// transition(':leave', [ ... ]); // * => void
动画文件
export function routerTransition() {
return trigger('routerTra
浏览 2提问于2017-04-13得票数 6
回答已采纳
1回答
我想为我的ng-repeat生成的项目做一个简单的淡出动画，我遵循了上的所有说明，但仍然没有骰子。
这是我的模块
var app = angular.module('testApp', ['ngRoute','ngAnimate']);
这是我标记中的ng-repeat
<div class="col-md-6 col-xs-12" ng-repeat="mark in marks" ng-animate="'animate' ">
<div class=
浏览 1提问于2016-03-23得票数 3
回答已采纳
我正在使用‘routerLink’导航到一个新页面，我想知道如何禁用页面过渡动画？我无法在文档或此处找到这个简单问题的答案(我只找到了旧版本的Ionic /Angular的答案)。
有没有人能给我指个方向？
浏览 4提问于2019-06-17得票数 15
回答已采纳
6回答
我在angular2中使用webpack，当我试图运行我的应用程序时，我收到一个错误声明
找不到模块“@角/动画”
package.json
{
"name": "angular-quickstart",
"version": "1.0.0",
"description": "QuickStart package.json from the documentation, supplemented with testing support",
"scripts"
浏览 6提问于2017-03-17得票数 35
回答已采纳
我试图使用隐式动画在CALayer上动画一个自定义属性：
[UIView animateWithDuration:2.0f animations:^{
self.imageView.myLayer.myProperty = 1;
}];
在-actionForKey: method中，我需要返回动画，负责插值这些值。当然，我必须以某种方式告诉动画如何检索动画的其他参数(即工期和定时函数)。
- (id<CAAction>)actionForKey:(NSString *)event
{
if ([event isEqualToString:@"myProp
浏览 1提问于2014-03-14得票数 7
回答已采纳
3回答
基本上，我想利用angular (目前是4)中的web- animations -api polyfill在元素上执行无限的动画。
让我们看一个基本的非角度示例：
var ball = document.getElementById('ball');
ball.animate([
{ transform: 'scale(0.5)' },
{ transform: 'scale(1)' }
], {
duration: 1000,
iterations: Infinity,
direction: 'alternat
浏览 9提问于2017-06-14得票数 7
我正在尝试运行一个测试自定义addClass动画的单元测试。无论我尝试什么，包括在网络上运行示例，在karma test runner中运行自定义动画。注意:我的动画代码在工作站点中工作得很好。我只想能够为我的动画生成jasmine测试。
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['jasmine'],
files: [
'Scripts\\angular.js',
'Scripts\\an
浏览 1提问于2014-01-05得票数 1
在我的角度应用程序中，我想在app init之前加载一个JSON数据，我将它存储在一个服务中，并在我的应用程序中使用它。
我使用解析器在app init之前加载数据，就像在中提示的那样。但是，解决方案在我服务或生成ng时抛出了错误。
错误中遇到静态解析符号值的错误。不支持函数调用。考虑将函数或lambda替换为导出函数的引用(原始.ts文件中的位置43:19 )，在/Users/name/src/app/app.module.ts中解析符号AppModule
请让我知道如何解决这一错误，或如果有任何其他方式加载数据之前，应用程序。
app.module.ts
import { APP_
浏览 0提问于2017-07-29得票数 0
我的问题是，我们如何在angular material小部件中禁用按钮或复选框动画？
有一些css解决方案可以用none覆盖转换，但它不起作用。
谢谢,
浏览 2提问于2017-05-03得票数 11
回答已采纳
我有一个圆形进度条(健身跟踪器)，我想动画的“进度”与弹簧动画使用阻尼和刚度。不是普通的动画。
浏览 1提问于2021-08-07得票数 2
1回答
我如何立即(不是动画！)从服务中滚动到Angular8+中的顶部？
window.scrollto(0,0)不能工作。
$([document.documentElement, document.body]).animate({
scrollTop: 0
}, 100)
不是很漂亮，但至少可以工作，但期限值似乎不允许设置为0(这将完全失去jquery的动画方法的用途:)
浏览 1提问于2020-07-03得票数 0
回答已采纳
我在CAShapeLayer中使用一个CAShapeLayer来简单地动画一条从左到右的线条(这只是一个更复杂程序的精简版本)。我已经放慢了它的速度，以表明开始的季度几乎是瞬间的，然后其他的动画正常。
我已经看到可以使用UIView.动画的选项来设置UIViewAnimationCurve选项(例如，.EaseIn或.Linear)。在将CAAnimation嵌入到CAShapeLayer中时，可以设置这些选项吗？是否有必要在每次运行动画时创建动画，还是有一个“运行动画”命令？
下面是我的压缩代码：
// the containing UIView is called mainView
浏览 0提问于2017-10-10得票数 1
回答已采纳
我试图通过指令向元素添加动画。动画完成后，我希望它调用传递的回调函数。我试着用这种方式实现它()
“addAnimation”指令：
angular.module('myModule')
.directive('addAnimation', function ($compile) {
return {
restrict: 'A',
scope: {
onFinish:"&"
},
replace: false,
terminal: tr
浏览 1提问于2015-06-15得票数 3
回答已采纳
2回答
我在一个angular-meteor项目中使用了angular-material和ui-router。我成功地使用了带有angular-material的ui-router，除了一件事:如果你注意到，angular material标签有一个很小的动画，当点击标签时，每个标签的内容会从左边或右边滑动。使用ui-router时，此动画将丢失。有没有办法使用ui-router来保持它？事先谢谢你。
浏览 2提问于2016-01-21得票数 1
我一直在和Angular2路由器玩，想找出其他的。
我在Angular2文档中遇到了类似的情况：
停用(指令:指令)：承诺
移除此路由器的出口和所有子代出口的内容
我想知道如何设置延迟，并使用新类作为提供程序，以便所有的路由器导航都有一些延迟(比如1s)。我想这样做，以便我可以在幻灯片出动画-如果我可以延迟路线停用，我可以让两个路线(前和下一个)在同一时间可见。
浏览 1提问于2016-03-26得票数 1
2回答
我有一些使用jQuery实现动画效果的自定义指令(angular内置的ngShow/ngHide等都是功能性的，但并不美观)。我记得我在文档中读到过，angular有自己的DOM选择器(类似于angular.export()或angular.select())，我应该使用它来代替$(SELECTOR)；但是我现在找不到它。
我正在做这样的事情：
//view
<div scroll-to="element"> //`element` is set via ng-click
…
</div>
//directive
link: function(sc
浏览 0提问于2013-03-08得票数 35
回答已采纳
当我将angular/Cli更新为“@angular/编译器-cli”："5.0.0“时，请推荐我，我得到了下面的错误。
失败:动画触发器"transform“生成失败，因为-提供的动画属性"transform”不是支持的CSS pr -提供的动画属性"transform“不是支持的CSS pr
浏览 1提问于2017-11-22得票数 1
2回答
我的工作流程目前使用的是webpack、eslint和angular。在我的动画中，我需要ng- app.js，如下所示：
require("angular-animate/angular-animate.min");
var mainApp = angular.module("client", [
//add the components here (personal and 3rd party).
"ngAnimate",
)];
问题是ng-animate似乎没有加载，因为当我尝试在css中设置ng-enter等的动画，甚至使用j
浏览 7提问于2017-03-28得票数 2
我有一个动画(钓鱼)，当玩家捕捉到什么或取消动作时，我想向后播放。
向后播放动画就像将速度设置为-1一样简单，即：
anim.SetFloat("direction", -1.0f);
然而，我的钓鱼动画一直播放，直到我抓到什么，或取消动画。这意味着动画的最后一帧正在显示，但是动画的时间还在继续。
所以
动画达到最后一帧。
然后我站在那里8秒，
我抓到了什么，所以我把速度改为-1。
anim现在将逆转我“站在原地”的8秒，甚至在它到达实际动画之前。
我需要停止动画时间上的最后一帧(不离开动画)，这样反向将是即时的。并且在反转结束之前不要退出动画。也许还有别的办法，但我想不出来。
浏览 0提问于2017-06-07得票数 0
回答已采纳
我不应该在我的应用程序中使用jQuery，但是我得到了一个场景，我需要元素的偏移量，而不是使用$(element).offset()
我用过angular.element(element).offset()，我也用过像angular.element(element).animate(targetPosition)这样的动画，它工作正常，所以我想知道angular.element()是否内置了所有的jQuery函数？
任何解释都将不胜感激。
浏览 0提问于2017-01-09得票数 2
1回答
我正在使用Angular 4，并且已经在我的应用程序中实现了Angular材质工具提示，如下所示(它工作得很好)
但是，当我将鼠标悬停在工具提示#nav div上时，工具提示会显示动画，但我在官方文档中看不到禁用此动画的任何属性--仅针对此元素禁用此动画的最佳方法是什么
<div id="nav" matTooltip="Filter"
matTooltipShowDelay="1000"
matTooltipPosition="above">
浏览 0提问于2018-03-09得票数 1
这是我第一次使用Angular 2动画，我在实现上有一点小问题。我使用了角度参考线，但我有以下错误：
ERROR Error: The provided animation trigger "menubarState" has not been
registered!
at AnimationTransitionNamespace._getTrigger (transition_animation_engine.js:239)
at AnimationTransitionNamespace.trigger (transition_animation_engine.js:262
浏览 0提问于2018-01-25得票数 12
1回答
我有一个非常简单的动画，我想做，但被这些错误困住了
ArgumentError: Error #1063: Argument count mismatch on ReverseCirculation_Complete_Graham_1_ActionScript3_fla::MainTimeline/Play(). Expected 0, got 1.
这个想法是一个动画将暂停，然后点击“播放”按钮开始停止或暂停动画之前，点击“下一步”预览继续动画。
我的代码如下所示：
//imports needed
stop();
import flash.display.MovieClip;
impo
浏览 1提问于2018-09-25得票数 1
回答已采纳
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
腾讯云开发者
