Изменить направление анимации центрированной кнопки на шоу (продолжительность) - PullRequest
Новая
       42

Изменить направление анимации центрированной кнопки на шоу (продолжительность)

0 голосов
/ 13 марта 2019

У меня есть div с некоторыми абзацами, которые я хочу отображать через .show () по требованию.В этом div есть еще один div, содержащий кнопку.Для этого элемента div установлено выравнивание текста по центру, поэтому моя кнопка находится посередине всего текста в абзацах.

При использовании show (1000) текст анимируется сверху вниз, что точнокак я этого хочуОднако кнопка, вместо того, чтобы следовать этому поведению, скользит слева.

$('.showme').show(1000);
    .wrapper {
        text-align: center;
    }
    
    .button {
        position: absolute;
    }
    
    .showme {
      display: none;
      width: 400px;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="showme">
    <p>
        Text
    </p>
    <p>
        More Text
    </p>
    <div class="wrapper">
        <button class="button">Hello</button>
    </div>
</div>

Вы можете увидеть поведение в этом JSFiddle

Я хочу, чтобы кнопка была немедленно впосередине и сдвиньте вместе с абзацами.Как можно этого добиться?

РЕДАКТИРОВАТЬ: ... при сохранении логики Div-wrapper Text Align в том виде, в каком она есть в настоящее время.Я только хочу изменить способ анимации, а не расположение кнопки.Мне нужно сделать это в моем проекте.

Ответы [ 3 ]

1 голос
/ 13 марта 2019

Если вы хотите установить кнопку сразу в середину, вы должны расположить эту кнопку. JSFiddle 

.wrapper {
  text-align: center;
  position: relative;
}
.button {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

РЕДАКТИРОВАТЬ:

Если вы хотите сохранить стили div.wrapper без изменений, но вы можете удалить position: absolute; из кнопки, которую вы можете попробовать использовать$('.showme').slideDown(1000); - JSFiddle

Если вы хотите сохранить стили div.wrapper без изменений, а также создать собственную анимацию, вам следует .addClass("nameClass") со своими собственными стилями и не использовать .show()

0 голосов
/ 13 марта 2019 
.wrapper {
    text-align: center;
}

.showme {
  display: none;
  width: 400px;
  border: 1px solid black;
  text-align: center;
}

Это делает трюк.Вам не нужен весь другой HTML.http://jsfiddle.net/zvj3axmf/

Или вы можете сделать что-то вроде этого: http://jsfiddle.net/yjacu3bL/ Это будет исчезать в кнопке под текстом после завершения первой анимации.Но было бы лучше, если бы вы решили это с помощью анимации CSS.

Просто добавили границу, чтобы показать вам, как это выравнивается.

0 голосов
/ 13 марта 2019

Замените ваш CSS-файл этим кодом 

 .wrapper {
    position: relative;
}
.button {
  position: absolute;
  left: 50%;
  right: 50%;
  transform: translateX(-50%);
}

.showme {
  display: none;
  width: 400px;
}
...