每当我更改属性的值时,我想创建一个过渡效果.
我尝试过以下操作
@Component({
selector: 'image-holder',
template: `
<div class="carousel-image">
<img src="{{ image }}" [@slideInRight]="slide" />
<span>{{ text }}</span>
</div>
`,
styleUrls: ['../greenscreen.scss'],
animations: [
trigger(
'slideInRight',
[
transition(
':enter', [
style({transform: 'translateX(100%)', opacity: 0}),
animate('500ms', style({transform: 'translateX(0)', opacity: 1}))
]
),
transition(
':leave', [
style({transform: 'translateX(0)', 'opacity': 1}),
animate('500ms', style({transform: 'translateX(100%)',opacity: 0}))
]
)
])
]
})
export class ImageHolderComponent implements OnChanges {
@Input()
image: string;
@Input()
text: string;
public slide: boolean = true;
public ngOnChanges(changes: { [propKey: string]: SimpleChange …使用成帧器运动，当我悬停在作为按钮的父元素时，我想为我的 Icon 组件设置动画以旋转 90 度。
<motion.button type="button" whileHover={{scale: 1.1}}>
Visit our Industry
{/*Animate this Icon to rotate 90 degrees*/}
<Icon type="arrow-up" />
</motion.button>我看到了变体的使用，但不确定如何真正将它们与whileHover.
任何帮助将不胜感激，因为这是一个新事物。
我刚刚开始搞乱Ng2,现在我正在开发一个带有ionic2的应用程序.我是第一次进入动画部分,我遇到了一些问题.
我有一个基本上重复不同宽度的ng.数组中的每个元素都有自己的div的宽度值,该值是通过组件的onInit方法计算出来的.在动画之前,我通过绑定宽度[style.width]="expresson".文档说您可以使用'*'定义动画结束状态样式,这意味着它将从计算的样式中获得正确的值,但是当我以编程方式自己设置宽度时,这不起作用.
所以,问题是,我如何告诉动画在我改变宽度时触发,或动态设置结束状态的值？谢谢!
编辑:这是一个有例子的傻瓜.我将动画设置后的最终宽度设置为50%,但是我遇到的问题是将最终宽度设置为组件数组中定义的值.只需删除html中的@animation即可查看我想要的最终结果.
Web动画是一个新的w3c规范,只是为了清楚我们在谈论什么.无论哪种方式,我都想顺利滚动到某个元素.使用jQuery的Animate功能这总是一件容易的事,但对于Web动画来说,这似乎并不那么简单.有没有办法使用Web动画计时功能并将它们应用于DOM属性(scrollTop).我问的原因是我不想加载整个(额外)库只是为了使用它的插值函数,而在我的应用程序的其余部分使用不同的技术/库.
基本上,我想在角度(当前为4)中使用web-animations-api polyfill来对元素执行无限动画.
让我们看一个基本的非角度示例:
var ball = document.getElementById('ball');
ball.animate([
{ transform: 'scale(0.5)' },
{ transform: 'scale(1)' }
], {
duration: 1000,
iterations: Infinity,
direction: 'alternate',
easing: 'ease-in-out'
});.container {
position: relative;
width: 100%;
height: 200px;
}
.ball {
position: absolute;
width: 80px;
height: 80px;
border-radius: 50%;
border: 2px solid #E57373;
background: #F06292;
box-shadow: 0px 0px 15px #F06292;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.5/web-animations.min.js"></script>
<div class="container">
<div class="ball" id="ball"><div>
</div>我如何将其翻译成Angular？
这是我到目前为止尝试过但只运行一次:
animations: [ …我正在开发一个 Angular 响应式应用程序，它在移动设备上有一个抽屉。
我喜欢 Angular 中的 Web Animations API 实现，但我找不到可以根据媒体查询断点配置动画的地方。
我所能找到的只是通过我的 css 表取消动画，但这让我开始在我的项目中的不同地方传播代码，而且我不确定这是我想要做的 angular ......
现实生活中的例子
我的应用程序抽屉使用此代码制作动画
<div class="mobile-menu" [@animateDrawer]="drawerOpened">
<!-- Drawer's menu goes here -->
</div>
drawerOpened是一个布尔值，当应用菜单按钮被按下时切换。
我的组件看起来像这样：
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss'],
animations: [
trigger('animateDrawer', [
state('inactive', style({
transform: 'translate3d(-100%, 0, 0)'
})),
state('active', style({
transform: 'translate3d(0, 0, 0)'
}))
])
]
})
我取消动画效果的CSS 代码
.mobile-menu {
opacity: 1 !important;
display: flex !important;
transform: none !important;
}
除了在我的 css 代码中操作所有内容并禁用 Desktop BreakPoint …
我想在angular 4应用中为图像交换设置动画。当控制器替换img src属性时，旧图像应消失并出现新图像。
在AngularJS中，可以通过使用ng-animate-swap更改不透明度来实现。但是，Angular 4似乎不支持动画交换。没有交换触发器如何实现？
我尝试为src属性添加从void到*的过渡，然后又添加回来，但这并没有按预期工作。第一个图像是有动画的，后来交换是在没有动画的情况下发生的。
@Component({
selector: 'app-play-card',
template: '<div (click)="loadImg()"><img [@fade]="imgsrc" src="{{ imgsrc }}" /></div>',
styleUrls: ['./play-card.component.css'],
animations: [
trigger('fade', [
transition('void => *', [
style({opacity: 0.1}),
animate(5000, style({opacity: 1}))
]),
transition('* => void', [
style({opacity: 0.9}),
animate(5000, style({opacity: 0}))
])
])
]
})