Полимерная бумага-диалог с бумажной анимацией с плавающей лазером

Я начал сегодня с 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>

я добавил следующую строку в конце бумажного диалоговом transition.html:

<paper-dialog-transition id="paper-dialog-transition" transitionType="fade"></paper-dialog-transition>

Спасибо за любую помощь или комментарий!

источник

2014-07-01 joao Beno

Из кода я не уверен, я ли вы пытались это или нет, но это не поможет мне:

<paper-dialog transition="core-transition-bottom">

Теперь у меня есть анимация. Возможные значения атрибута transition можно найти в core-transition demo page.

Надеется, что это помогло

источник

2014-08-18 13:15:26 amit

Я попробую позже, если это сработает, я проверю ваш ответ ... Спасибо за ответ! –

-1

У меня были проблемы с анимацией, и все они были решены путем фиксации абсолютных позиций к элементам, как переходам нужны.

источник

2015-01-27 00:07:53

Полимерная бумага-диалог с бумажной анимацией с плавающей лазером

ответ

Смежные вопросы