Как заставить преобразование перевода начинаться с элемента?
Я реализовал простой наскок в анимации в CSS. Эта анимация запускается при нажатии кнопки. Результатом доволен, но могу его улучшить. Я хочу, чтобы текст, который появляется, начинался с самого элемента кнопки, а не от края страницы. Я попытался изменить свойства перевода, но мне не повезло. Мне было интересно, может ли кто-нибудь дать мне несколько советов о том, как это исправить, а также было бы здорово, если бы код можно было оптимизировать для использования SASS/SCSS.
Обновлено: обновлен код с помощью SCSS:
Вот код анимации:
HTML:
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "swoop-in">
<div class = "swoop-in-content">
PRETTY NEAT TRANSITION BLAH BLAH..
</div>
</div>
<button class = "toggle">Toggle</button>
CSS:
swoop-in {
position: absolute;
right: 0px;
top: 140px;
width: 220px;
margin-left: -30px;
&.show .swoop-in-content {
transform: translateX(0);
opacity: 1;
-webkit-transform: translateX(0);
}
.swoop-in-content {
transform: translateX(100%);
-webkit-transform: translateX(100%);
opacity: 0;
transition: all .5s ease;
}
}
.toggle {
position: absolute;
top: 120px;
right: 20px;
background: none;
border: 2px solid;
border-bottom-width: 4px;
margin: 1em;
padding: 1em 2em;
height: auto;
text-align: center;
text-transform: uppercase;
background-color: red;
&:hover {
background-color: #9c89f7;
cursor: pointer;
}
}
jQuery:
$('.toggle').click(function() {
$('.swoop-in').toggleClass('show');
});
Вот для него CODEPEN. Обновлен CODEPEN с помощью SCSS.
Спасибо.
Ответы 2
Предположим, это не лучшее решение, но вы можете поиграть с ним, чтобы сделать его красивее (в зависимости от содержимого этого анимированного div).
https://codepen.io/Yulia_pi/pen/oddpZY
Вместо изменения свойства позиции я изменил исходный width: 0px; на желаемый и расположил его у левого края кнопки. Для этого нам также необходимо установить размер кнопки. overflow: hidden делает текст в переходном div не таким уж странным, но все же не идеальным.
Возможно, это подходит для ваших нужд https://codepen.io/AElkhodary/pen/MGGBvV, вы можете просто указать процентное значение свойства translate, если вы хотите изменить эффект
ОБНОВЛЕНО
У Safari есть проблема с transition: all, мы всегда должны указывать, что мы хотим перейти, поэтому решение
transition: transform .4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity .4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
$('.toggle').on('click', function() {
$('.swoop-in').toggleClass('show');
});body {
max-width: 1200px;
position: relative;
margin: auto;
}
.swoop-in {
transform: translateX(45%);
opacity: 0;
position: absolute;
right: 120px;
top: 22px;
overflow: hidden;
transition: transform .4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity .4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: -1;
}
.swoop-in.show {
transform: translateX(0);
opacity: 1;
}
.btn {
text-align: right;
}
.toggle {
background: none;
border: 2px solid;
border-bottom-width: 4px;
margin: 1em;
padding: 1em 2em;
min-width: 100px;
height: auto;
text-align: center;
text-transform: uppercase;
background-color: red;
}
.toggle:hover {
background-color: #9c89f7;
cursor: pointer;
}<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "swoop-in">
PRETTY NEAT TRANSITION BLAH BLAH..
</div>
<div class = "btn">
<button class = "toggle">Toggle</button>
</div>извините, я не понял, что именно не работает? если вы включите кнопку, текст будет появляться и исчезать, как вы искали
Это не переключение текста. Я вообще не вижу текста.
Я только что проверил его снова, он полностью работает нормально, и даже в коде codepen.io/AElkhodary/pen/MGGBvV все в порядке
Аааа. он не работает в Safari ... Он работает в Firefox, Chrome, IE 11 и Edge. Я предполагаю, что это из-за кубической кривой Безье. Хотя я не уверен. Любая идея?
Привет, Адель, у тебя была возможность попробовать это в Safari?
@ShellZero да, я исправил это и уже обновил в сообщении и коде, а также в сафари, когда вы говорите transition:all .2s ease-in-out, независимо от того, какая функция ведет себя по-разному, мы должны указать, какое свойство мы хотим перенести, поэтому я исправил, и исправление заключается в использовании transition: transform .4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity .4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
Прохладный. Но если вы переместите кнопку немного влево, вы действительно сможете увидеть текст, идущий с края .. В любом случае, спасибо за ваше время и усилия :) Ура.
Круто :) Спасибо за попытку. Это действительно дает мне отличное представление о том, как к этому подойти. Примет ответ через 24 часа, чтобы у него было достаточно времени для любых других ответов :)