我今天从 Polymer 开始，我对用它归档的东西感到非常兴奋!但是我偶然发现了一个我不知道如何解决的问题，如果您添加 <paper-input floatingLabel>在 <paper-dialog> 内，纸对话框失去了酷炫的动画。是否有任何已知的解决方法来获取动画，或者当动画组件位于另一个动画组件内时这是一个已知问题？
当我被否决时，我决定提供代码来帮助你们帮助我:
<!DOCTYPE html>
<html>
<head>
<!-- 1. Load platform.js for polyfill support. -->
<script src="bower_components/platform/platform.js"></script>
<!-- 2. Use an HTML Import to bring in the element. -->
<link rel="import" href="bower_components/core-icons/core-icons.html">
<link rel="import" href="bower_components/core-overlay/core-overlay.html">
<link rel="import" href="bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="bower_components/core-transition/core-transition.html">
<link rel="import" href="bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="bower_components/paper-dialog/paper-dialog-transition.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="bower_components/paper-input/paper-input.html">
<link rel="import" href="bower_components/paper-toast/paper-toast.html">
<link rel="stylesheet" href="stylesheets/style.css"/>
<style shim-shadowdom>
/* Coloquei Junto com os inputs */
body {
font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
margin: 0;
padding: 24px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
}
</style>
</head>
<body unresolved touch-action="auto">
<core-toolbar style="background-color: #f5f5f5">
<span flex>
<img src="images/logo_Positivo.png"/>
</span>
<paper-button label="Login" class="colored" onclick="toggleDialog('paper-dialog-transition')"></paper-button>
</core-toolbar>
<paper-dialog heading="Login" transition="paper-dialog-transition" style="background-color: #efefef">
<div>
<img src="/images/academia.png" class="gym_logo"/>
<img src="/images/default_user.png" class="usr_logo"/>
</div>
<!--<paper-input floatingLabel label="Chave"></paper-input><br/>-->
<paper-input floatingLabel label="Usuário"></paper-input><br/>
<paper-input floatingLabel label="Senha"></paper-input><br/>
<paper-button label="Entrar" class="colored" affirmative default onclick="document.querySelector('#toast3').show();disparaLogado();"></paper-button>
</paper-dialog>
<paper-dialog heading="Login" transition="paper-dialog-transition" id="logado">
Logado!!!
</paper-dialog>
<paper-toast id="toast3" class="capsule" text="Acessando o sistema e validando dados..." style="padding-right: 60px;" duration="5000"></paper-toast>
<script>
function toggleDialog(transition) {
var dialog = document.querySelector('paper-dialog[transition=' + transition + ']');
dialog.toggle();
}
function disparaLogado() {
selecionarModulos = window.setTimeout(function () {
var logado = document.querySelector('paper-dialog#logado');
logado.toggle();
}, 5000);
}
</script>
</body>
</html>
我在 paper-dialog-transition.html 的末尾添加了以下行:
<paper-dialog-transition id="paper-dialog-transition" transitionType="fade"></paper-dialog-transition>
感谢您的任何帮助或评论!
最佳答案
根据您的代码，我不确定您是否尝试过此操作，但它确实帮助了我:<paper-dialog transition="core-transition-bottom">
现在我有动画回来了。 transition 的可能值属性可以在 core-transition demo page 中找到.
希望它有帮助
关于带有纸张输入 float 标签动画的 polymer 纸对话框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24517690/