Javascript-форум - Выдвижение блока с текстом без искажений

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Выдвижение блока с текстом без искажений (https://javascript.ru/forum/misc/82453-vydvizhenie-bloka-s-tekstom-bez-iskazhenijj.html)

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>

Цитата:

Сообщение от рони (Сообщение 536501)

строка 31

Имел ввиду не скорость анимации, а саму работу скрипта.

рони,
Скрипт попробую и напишу. Неужели он нагружает страницу больше чем css?

Цитата:

Сообщение от jurvrn

Неужели он нагружает страницу больше чем css?

да. но это не существенно в данном случае,в пост #21 сделаны изменения

рони,
Пока до компьютера не добрался, чтобы попробовать скрипт. Вы его еще больше усложнили )
Пусть нагружает больше , мне сейчас важнее убрать артефакт искажения. Посмотрю как скрипт отработает на моем браузере.
В вашем способе нужно задавать ширину изначально точно. Мне бы хотелось чтобы ширина высчиталась динамично, в зависимости от контента. Может в таком случае нужно margin'ами оперировать?

Цитата:

Сообщение от jurvrn

мне сейчас важнее убрать артефакт искажения.

это к специалистам по css.

Цитата:

Сообщение от jurvrn

Мне бы хотелось чтобы ширина высчиталась динамично,

могу только гадать о вашем html.

Цитата:

Сообщение от рони (Сообщение 536531)

это к специалистам по 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>

меню справа на 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>

рони,
в вашем посте №21 нет такого артефакта, потому то выдвижение реализуется как-то под другому. Вот к этому и стремлюсь.
Вот в этих кодах можно что-то исправить чтобы было как мне нужно?
У самого не получается заставить их работать
https://codepen.io/intersk/pen/YzZwyYj
https://codepen.io/intersk/pen/KKWVzQb

jurvrn,
https://codepen.io/intersk/pen/YzZwyYj отсутствует jquery-ui
https://codepen.io/intersk/pen/KKWVzQb отсутствует #