Блог

Главная - Вопросы по программированию - Полимерная бумага-диалог с анимацией плавающей метки ввода бумаги

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

#polymer #material-design

#полимер #материал-дизайн

Вопрос:

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

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

Ответ №1:

Судя по вашему коду, я не уверен, пробовали ли вы это или нет, но мне это помогло:

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

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

Надеюсь, это помогло

Комментарии:

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

Ответ №2:

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