我刚刚开始学习聚合物,我试图在纸上对话框上放入入口和退出动画。似乎该入口动画效果很好,但是出口动画不是。我通过手动编码jQuery进行解决方法,但我想使用纸对话框内置的功能。
谢谢。
<paper-dialog id="dialog" entry-animation="slide-from-top-animation" exit-animation="fade-out-animation" class="dialogstyle" no-cancel-on-outside-click no-cancel-on-esc-key>
<div class="buttons">
<paper-button id="closebutton" dialog-dismiss autofocus><i class="fa fa-times" aria-hidden="true"></i></paper-button>
</div>
<strong>content here</strong>
</paper-dialog>
只要您记得包括 fade-out-animation.html
。
<head>
<base href="https://polygit.org/polymer+1.11.1/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="paper-dialog/paper-dialog.html">
<link rel="import" href="neon-animation/web-animations.html">
<link rel="import" href="neon-animation/animations/slide-from-top-animation.html">
<link rel="import" href="neon-animation/animations/fade-out-animation.html">
</head>
<body>
<paper-dialog entry-animation="slide-from-top-animation"
exit-animation="fade-out-animation" opened>
<h2>Header</h2>
<div>Dialog body</div>
</paper-dialog>
</body>
codepen