Вопросы Теги

Как сделать так, чтобы анимация воспроизводилась с помощью onclick.

Card-header - это гибкий элемент карты, поэтому мы должны работать со своим свойством flex. Попробуйте следующее:

Отредактируйте, чтобы объяснить, почему работает следующий код:

  • .card - это гибкая рамка с flex-direction:column
  • .card имеющие два элемента гибкости: .card-header и .card-body
  • Если общая сумма двух элементов гибкости меньше высоты flexbox, указанная проблема не будет возникать. Но в тот момент, когда он превосходит высоту flexbox, свойство flex-shrink обоих элементов гибкости входит в игру и сжимает высоту обоих предметов в равной пропорции.
  • Ниже кодовых наборов flex-shrink для .card-header 0, то есть его высота не изменится, когда высота .card-body увеличивается (за исключением переполнения) 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<style>
    .card{
        width: 500px;
        height: 500px;
    }
    .card-header{
        flex: 1 0 100px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .card-body{
        overflow-y: scroll;
    }
    .border-red{
        border: 1px solid red;
    }
</style>
<body>

<div class="card text-center">
    <div class="card-header border-red ">
        <div>left</div>
        <div>center</div>
        <div>right</div>
    </div>
    <div class="card-body">
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
    </div>
</div>

</body>
</html>

1
задан TechnicProblem 18 January 2019 в 21:42
поделиться

1 ответ

function animateAll() {
  animate1.restart();
  animate2.restart();
}

использовать animate.restart () вместо animate.restart при выполнении animateAll.

Используйте только круглые скобки для выполнения функции, используйте только имя функции, когда вы хотите назначить ее обработчику щелчков.

Вам нужно удалить круглые скобки из animateAll, когда пользователь использует их для обработки обработчиком onclick. 

   document.querySelector('#button2').onclick = animateAll;

Новый код должен быть: - 

   function animateAll() {
  animate1.restart();
  animate2.restart();
}

document.querySelector('#button2').onclick = animateAll;

вы также можете использовать animate1.play (), animate2.play () вместо animate1.restart (), animate1.play () [ 117]

0
ответ дан Aman Rathore 18 January 2019 в 21:42
поделиться
Другие вопросы по тегам:

Похожие вопросы: