12.05.2021, 16:14
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
jurvrn,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body{
position: relative;
}
.toggle {
position: absolute;
width: 0px;
height: 100px;
background-color: #ccc;
left: calc(100% - var(--left, 0px));
overflow: hidden;
top: 0;
}
.toggle.two {
top: 120px;
background-color: #008000;
}
.toggle > div{
position: relative;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function() {
let direction = 1;
$(document).click(function() {
direction ^= 1;
$(".toggle").stop().each((i, el) => {
let width = el.dataset.width;
let options = direction ? {
width: `-=${width}`,
left: `+=${width}`
} : {
width: `+=${width}`,
left: `-=${width}`
};
$(el).animate(
options, {
duration: 800,
complete: function() {
this.style.setProperty("--left", direction ? "0px" : `${width}`);
this.style.left = ''
}
});
})
});
});
</script>
</head>
<body>
<p>Click anywhere to toggle the box.</p>
<div class="toggle" data-width="300px"><div style="width:300px">toggle slideRight</div></div>
<div class="toggle two" data-width="100px"><div style="width:100px">toggle slideRight test test</div></div>
</body>
</html>
Последний раз редактировалось рони, 12.05.2021 в 21:03.
|
|
12.05.2021, 20:51
|
|
Аспирант
|
|
Регистрация: 04.04.2021
Сообщений: 52
|
|
Сообщение от рони
|
|
строка 31
|
Имел ввиду не скорость анимации, а саму работу скрипта. |
|
12.05.2021, 20:55
|
|
Аспирант
|
|
Регистрация: 04.04.2021
Сообщений: 52
|
|
|
рони,
Скрипт попробую и напишу. Неужели он нагружает страницу больше чем css?
|
|
12.05.2021, 21:04
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
Сообщение от jurvrn
|
|
Неужели он нагружает страницу больше чем css?
|
да. но это не существенно в данном случае,в пост #21 сделаны изменения |
|
13.05.2021, 01:20
|
|
Аспирант
|
|
Регистрация: 04.04.2021
Сообщений: 52
|
|
|
рони,
Пока до компьютера не добрался, чтобы попробовать скрипт. Вы его еще больше усложнили )
Пусть нагружает больше , мне сейчас важнее убрать артефакт искажения. Посмотрю как скрипт отработает на моем браузере.
В вашем способе нужно задавать ширину изначально точно. Мне бы хотелось чтобы ширина высчиталась динамично, в зависимости от контента. Может в таком случае нужно margin'ами оперировать?
Последний раз редактировалось jurvrn, 13.05.2021 в 08:48.
|
|
13.05.2021, 10:41
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
Сообщение от jurvrn
|
|
мне сейчас важнее убрать артефакт искажения.
|
это к специалистам по css.
|
Сообщение от jurvrn
|
|
Мне бы хотелось чтобы ширина высчиталась динамично,
|
могу только гадать о вашем html. |
|
13.05.2021, 13:54
|
|
Аспирант
|
|
Регистрация: 04.04.2021
Сообщений: 52
|
|
|
Сообщение от рони
|
это к специалистам по css.
могу только гадать о вашем html.
|
вот. https://codepen.io/intersk/pen/gOmPJxW
.main-block {
z-index: 1;
position: fixed;
width: 36px;
height: 175px;
top: 0;
bottom: 0;
margin: auto 0;
}
.each-block {
position: relative;
z-index: 2;
display: flex;
margin-bottom: 10px;
}
.iconka-block, .textLine-Out {
height: 36px;
border: black 2px solid;
border-radius: 5px 0 0 5px;
}
.textLine-Out {
z-index: 3;
position: static;
display: flex;
background-color: rgb(213, 231, 248);
-webkit-transition: transform 0.3s ease-in-out;
-moz-transition: transform 0.3s ease-in-out;
-o-transition: transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-ms-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}
.textLine-Iner {
margin: auto;
font-size: 16px;
white-space: nowrap;
padding: 0 10px;
}
.iconka-block {
position: absolute;
display: flex;
z-index: 4;
background-color: rgb(226,226,226);
width: 36px;
right: 0;
cursor: pointer;
border-right: none;
}
.iconka-block:hover + .textLine-Out {
-webkit-transform: translateX(calc(-100% + 4px));
-moz-transform: translateX(calc(-100% + 4px));
-ms-transform: translateX(calc(-100% + 4px));
-o-transform: translateX(calc(-100% + 4px));
transform: translateX(calc(-100% + 4px));
}
.iconka-block .icon_all {
font-size: 22px;
text-align: center;
margin: auto;
}
<div class="main-block">
<div class="each-block">
<div class="iconka-block"><i class="fa fa-envelope-o icon_all icon_mail" aria-hidden="true"></i></div>
<div class="textLine-Out"><div class="textLine-Iner">Напишите нам</div></div>
</div>
<div class="each-block">
<div class="iconka-block"><i class="fa fa-podcast icon_all icon_111_enter" aria-hidden="true"></i></div>
<div class="textLine-Out"><div class="textLine-Iner">fa2-podcast 2icon</div></div>
</div>
<div class="each-block">
<div class="iconka-block"><i class="fa fa-bookmark-o icon_all icon_111_enter" aria-hidden="true"></i></div>
<div class="textLine-Out"><div class="textLine-Iner">33icon_fa-bookmark-o</div></div>
</div>
<div class="each-block">
<div class="iconka-block"><i class="fa fa-user-circle icon_all icon_enter" aria-hidden="true"></i></div>
<div class="textLine-Out"><div class="textLine-Iner">Вход на сайт</div></div>
</div>
</div>
Последний раз редактировалось jurvrn, 13.05.2021 в 14:09.
|
|
13.05.2021, 14:12
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
меню справа на css
jurvrn,
оставьте всё как есть, артефакт, если у кого-то и проявится, незаметен.
js тут ничего не исправит, и будет только лишним.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.main-block {
z-index: 1;
position: fixed;
width: 36px;
height: 175px;
top: 0;
bottom: 0;
margin: auto 0;
left: calc(100% - 36px);
}
.each-block {
position: relative;
z-index: 2;
display: flex;
margin-bottom: 10px;
}
.iconka-block, .textLine-Out {
height: 36px;
border: black 2px solid;
border-radius: 5px 0 0 5px;
}
.textLine-Out {
z-index: 3;
position: static;
display: flex;
background-color: rgb(213, 231, 248);
-webkit-transition: transform 0.3s ease-in-out;
-moz-transition: transform 0.3s ease-in-out;
-o-transition: transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-ms-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}
.textLine-Iner {
margin: auto;
font-size: 16px;
white-space: nowrap;
padding: 0 10px;
}
.iconka-block {
position: absolute;
display: flex;
z-index: 4;
background-color: rgb(226,226,226);
width: 36px;
right: 0;
cursor: pointer;
border-right: none;
}
.iconka-block:hover + .textLine-Out, .textLine-Out:hover {
-webkit-transform: translateX(calc(-100% + 4px));
-moz-transform: translateX(calc(-100% + 4px));
-ms-transform: translateX(calc(-100% + 4px));
-o-transform: translateX(calc(-100% + 4px));
transform: translateX(calc(-100% + 4px));
}
.iconka-block .icon_all {
font-size: 22px;
text-align: center;
margin: auto;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function() {
});
</script>
</head>
<body>
<div class="main-block">
<div class="each-block">
<div class="iconka-block"><i class="fa fa-envelope-o icon_all icon_mail" aria-hidden="true"></i></div>
<div class="textLine-Out"><div class="textLine-Iner">Напишите нам</div></div>
</div>
<div class="each-block">
<div class="iconka-block"><i class="fa fa-podcast icon_all icon_111_enter" aria-hidden="true"></i></div>
<div class="textLine-Out"><div class="textLine-Iner">fa2-podcast 2icon</div></div>
</div>
<div class="each-block">
<div class="iconka-block"><i class="fa fa-bookmark-o icon_all icon_111_enter" aria-hidden="true"></i></div>
<div class="textLine-Out"><div class="textLine-Iner">33icon_fa-bookmark-o</div></div>
</div>
<div class="each-block">
<div class="iconka-block"><i class="fa fa-user-circle icon_all icon_enter" aria-hidden="true"></i></div>
<div class="textLine-Out"><div class="textLine-Iner">Вход на сайт</div></div>
</div>
</div>
</body>
</html>
|
|
13.05.2021, 16:27
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
|
|
|
|
