草庐IT

javascript - Angular2 - 让动画不适用

coder 2025-02-21 原文

我有一个 Angular2 应用程序，我正在尝试将动画添加到我的路由中，以便它在我更改页面时滑动。进入动画效果很好，但是离开动画没有激活，加载新页面后上一页就消失了。有谁知道这个问题的原因？ plunker

根据anuglar2 docs ，我认为我的过渡是正确的。 

// transition(':enter', [ ... ]); // void => *
// transition(':leave', [ ... ]); // * => void

动画文件

export function routerTransition() {
    return trigger('routerTransition', [
        transition('void => *', [
            style({ transform: 'translateX(100%)' }),
            animate(1000)
        ]),
        transition('* => void', [
            style({ transform: 'translateX(-100%)' }),
            animate(1000)
        ])
    ])
}

child_1.component.ts

import { Component } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'
import { Router } from '@angular/router';
import { Observable } from 'rxjs/Rx';
import { routerTransition } from '../../directives/router.animation'; 
@Component({
    selector: 'about',
    template: require('./about.component.html'),
    styles: [require('./about.component.css')],
    animations: [routerTransition()],
    host: { '[@routerTransition]': '' }
})

child_2.component.ts

import { Component } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'
import { Router } from '@angular/router';
import { Observable } from 'rxjs/Rx';
import { routerTransition } from '../../directives/router.animation'; 
@Component({
    selector: 'home-info',
    template: require('./home.component.html'),
    styles: [require('./home.component.css')],
    animations: [routerTransition()],
    host: { '[@routerTransition]': '' }
})

最佳答案

看起来主要有两个问题:

  1. 离开过渡的定义方式与进入过渡相同，但需要不同地定义，以便指定样式用作过渡的“结束”状态而不是“开始”状态。

    // Instead of
transition('* => void', [
    style({ transform: 'translateX(-100%)' }),
    animate(1000)
])

// Use
transition('* => void', 
     animate(1000, style({transform: 'translateX(-100%)', opacity: 0}))
)

  2. 您需要在主机上安装 display:block(或 inline-block)，否则它是内联的并且翻译仅适用于 block 。

    // Instead of
host: { '[@routerTransition]': '' }

// Use
host: {
   '[@routerTransition]': 'true',
   '[style.display]': "'block'",
},

虽然动画可能不是您想要的，但至少它是一个或多或少的工作起点: https://plnkr.co/edit/eFrjtTOtXkWp8IUeAYdo?p=preview

这是来自 Angular 人的另一个例子:http://plnkr.co/edit/yJHjL5ap9l4MwOimCyyY?p=preview

关于javascript - Angular2 - 让动画不适用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43399846/

javascriptAngular239routerTransitioncodeangularanimationangular2-routing

有关javascript - Angular2 - 让动画不适用的更多相关文章

  1. ruby - inverse_of 是否适用于 has_many？ - 2

    当我使用has_one时，它​​工作得很好，但在has_many上却不行。在这里您可以看到object_id不同，因为它运行了另一个SQL来再次获取它。ruby-1.9.2-p290:001>e=Employee.create(name:'rafael',active:false)ruby-1.9.2-p290:002>b=Badge.create(number:1,employee:e)ruby-1.9.2-p290:003>a=Address.create(street:"123MarketSt",city:"SanDiego",employee:e)ruby-1.9.2-p290

  2. Unity 3D 制作开关门动画,旋转门制作,推拉门制作,门把手动画制作 - 2

    Unity自动旋转动画1.开门需要门把手先动,门再动2.关门需要门先动,门把手再动3.中途播放过程中不可以再次进行操作觉得太复杂?查看我的文章开关门简易进阶版效果:如果这个门可以直接打开的话,就不需要放置"门把手"如果门把手还有钥匙需要旋转,那就可以把钥匙放在门把手的"门把手",理论上是可以无限套娃的可调整参数有:角度,反向,轴向,速度运行时点击Test进行测试自己写的代码比较垃圾,命名与结构比较拉,高手轻点喷,新手有类似的需求可以拿去做参考上代码usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;u

  3. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  4. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  5. LVGL V8动画 - 2

    动画/*INITIALIZEANANIMATION 初始化一个动画*-----------------------*/lv_anim_ta;lv_anim_init(&a);/*MANDATORYSETTINGS 必选设置*------------------*//*Setthe"animator"function 设置“动画”功能*/lv_anim_set_exec_cb(&a,(lv_anim_exec_xcb_t)lv_obj_set_x);/*Setthe"animator"function*/lv_anim_set_var(&a,obj);/*Lengthoftheanim

  6. ruby - 如何使用适用于 ruby​​ 的 aws sdk 创建 route53 记录集？ - 2

    EC2会在实例停止然后重新启动时为其提供新的IP地址，因此我需要能够自动管理route53记录集，以便我可以一致地访问内容。遗憾的是，sdk的route53部分的文档远不如ec2的文档那么健壮(可以理解)，所以我有点卡住了。到目前为止，从我所看到的情况来看，似乎change_resource_record_sets(link)是可行的方法，但我对:chages需要什么感到困惑>因为它提到了一个Change对象，但没有提供指向所述对象描述的链接。这是我的代码目前的样子:r53.client.change_resource_record_sets(:hosted_zone_id=>'MY_

  7. 适用于Web开发的Python还是Ruby？ - 2

    Asitcurrentlystands,thisquestionisnotagoodfitforourQ&Aformat.Weexpectanswerstobesupportedbyfacts,references,orexpertise,butthisquestionwilllikelysolicitdebate,arguments,polling,orextendeddiscussion.Ifyoufeelthatthisquestioncanbeimprovedandpossiblyreopened,visitthehelpcenter提供指导。11年前关闭。我是一位精通HTML

  8. ruby - 从 Ruby 连接到适用于 Windows Phone 8 的 Microsoft 推送通知服务 - 2

    我们正在开发一个需要推送通知的WP8应用程序。为了测试它，我们使用CURL命令行运行推送通知POST请求，确保它实际连接，使用客户端SSL证书进行身份验证并发送正确的数据。我们确实知道，当我们收到对设备的推送时，这项工作是有效的。这是我们一直用于测试目的的CURL命令:curl--certclient_cert.pem-v-H"Content-Type:text/xml"-H"X-WindowsPhone-Target:Toast"-H"X-NotificationClass:2"-XPOST-d"MytitleMysubtitle"https://db3.notify.live.ne

  9. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  10. ruby-on-rails - rspec Mongoid 范围适用于开发而不是测试 - 2

    我有一个适用于Rails中的Mongoid对象的作用域，它在开发时效果很好，但在运行测试时效果不佳。它实际上在测试中根本不起作用。这是一个嵌入式文档。父级:classPersonincludeMongoid::Documentdefself.with_appointmentswhere(:appointments.not=>{'$size'=>0})endembeds_many:appointments,store_as:'Appointments',class_name:'Appointment'end嵌入的child:classAppointmentincludeMongoid::

随机推荐