Aurelia动画不起作用
Aurelia动画不起作用
提问于 2018-06-02 08:18:17
我正在尝试让一些简单的动画与Aurelia一起工作；
首先，我将插件放在main中：
.plugin(PLATFORM.moduleName('aurelia-animator-css')) 然后我为动画定义了一些css：
.my-cool-element > .au-enter {
opacity: 0 !important;
}
.my-cool-element > .au-enter-active {
-webkit-animation: fadeIn 5s;
animation: fadeIn 5s;
}
.my-cool-element > .au-leave-active {
-webkit-animation: fadeOut 5s;
animation: fadeOut 5s;
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}然后我在html中使用它：
<div class="my-cool-element">
<div class="au-animate">
<div if.bind="showMessage" class="navbar">${message}</div>
</div>
</div>然后在代码中，我设置了showMessage=true，元素显示了消息，但它没有动画。
但它不会有动画效果。我是不是遗漏了什么？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-02 09:29:38
要使动画与if.bind一起工作，au-animate类需要位于相同的元素中，如下所示：
<div class="my-cool-element">
<div if.bind="showMessage" class="au-animate">
<div class="navbar">${message}</div>
</div> 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50652400
复制相关文章
相似问题