Как добавить плавность?

Question

[steef08]

Как сделать чтобы исчезновение было плавным?

<div class="main__sections">
    <div class="inside__main__block">
        <div class="svg__box">
            <svg class="hello__svg" viewBox="0 0 1230.94 414.57"><path d="M-293.58-104.62S-103.61-205.49-60-366.25c9.13-32.45,9-58.31,0-74-10.72-18.82-49.69-33.21-75.55,31.94-27.82,70.11-52.22,377.24-44.11,322.48s34-176.24,99.89-183.19c37.66-4,49.55,23.58,52.83,47.92a117.06,117.06,0,0,1-3,45.32c-7.17,27.28-20.47,97.67,33.51,96.86,66.93-1,131.91-53.89,159.55-84.49,31.1-36.17,31.1-70.64,19.27-90.25-16.74-29.92-69.47-33-92.79,16.73C62.78-179.86,98.7-93.8,159-81.63S302.7-99.55,393.3-269.92c29.86-58.16,52.85-114.71,46.14-150.08-7.44-39.21-59.74-54.5-92.87-8.7-47,65-61.78,266.62-34.74,308.53S416.62-58,481.52-130.31s133.2-188.56,146.54-256.23c14-71.15-56.94-94.64-88.4-47.32C500.53-375,467.58-229.49,503.3-127a73.73,73.73,0,0,0,23.43,33.67c25.49,20.23,55.1,16,77.46,6.32a111.25,111.25,0,0,0,30.44-19.87c37.73-34.23,29-36.71,64.58-127.53C724-284.3,785-298.63,821-259.13a71,71,0,0,1,13.69,22.56c17.68,46,6.81,80-6.81,107.89-12,24.62-34.56,42.72-61.45,47.91-23.06,4.45-48.37-.35-66.48-24.27a78.88,78.88,0,0,1-12.66-25.8c-14.75-51,4.14-88.76,11-101.41,6.18-11.39,37.26-69.61,103.42-42.24,55.71,23.05,100.66-23.31,100.66-23.31" transform="translate(311.08 476.02)" style="fill:none;stroke:#fff;stroke-linecap:round;stroke-miterlimit:10;stroke-width:35px"/></svg>
            <svg class="hello__svg2" viewBox="0 0 418.99 127.25"><path d="M-522.27,990.84s2.87-17.88,14.85-17.3S-498.1,988-498.1,988s-5.24,26.83-5.75,29.64,6-46.72,27.29-45.7c14.81.72,8.93,20.1,8.93,20.1s-9.21,25.07,7.25,25.86,28.13-22.75,29.24-45.8c.21-4.43-9.36,70.49-9.6,75.43s4.42-75.87,29.87-74.64c16.33.79,12.46,20.53,12.46,20.53s-3.34,24.46-20.34,24.46c-15.21,0-16.53-9-16.7-9.86s4.17,27.91,63.07-9.1c2.25-1.42,3-5.44,3.43-8.07,1.07-7.08,3.37-19.21,3.63-20.53.34-1.63-13.16,46.42,6.71,47.38s23.43-27.52,23.43-27.52,3.29-18.24,3.61-19.62-11.82,46.91,7.5,46.91c23.27,0,48.11-51.05,50.43-73.65,1.06-8.45.46-16-5.78-16.31s-20.28,12.85-22.12,51,13.25,39.05,15.63,39.05c1.72,0,16.87-.43,17.93-22.55.9-18.84-13.92-20.06-13.67-23.9.26-4,23.42,28.6,43.68,29.58s18.79-14.15,18.94-17.19-1.8-11.93-10.41-12.35-16.56,6.65-17.22,20.32,3.19,25,20.07,25.84,31.87-15.21,37.15-47.45c1.1-5.36-6.06,43.77-6.58,47.64s5.85-46.13,23.76-46.13c19,0,9.23,44,8.61,46.38s5.08-46.64,25.1-46.13c16,.41,7.86,29.78,7.86,29.78s-4.86,15.37,7.39,15.78c8.49.28,13-9.7,13-9.7" transform="translate(525.77 -924)" style="fill:none;stroke:#fff;stroke-linecap:round;stroke-miterlimit:10;stroke-width:9px"/></svg>
        </div>
        <div class="text__box">
        </div>
    </div>
</div>

.main__sections {
    height: 100%;
    min-height: 700px;
    background: radial-gradient(circle at 61% 37%,rgba(221,121,240,1), rgba(221,121,240,0) 60%), radial-gradient(circle at 23% 71%,rgba(113,160,252,1), rgba(113,160,252,0) 60%), radial-gradient(circle at 96% 0%,rgba(239,205,247,1), rgba(239,205,247,0) 60%), radial-gradient(circle at 74% 91%,rgba(242,163,0,1), rgba(242,163,0,0) 60%), radial-gradient(circle at 3% 4%,rgba(228,210,255,1), rgba(228,210,255,0) 60%);
    display: flex;
    justify-content: center;
    align-items: center;
}
.inside__main__block {
    display: block;
    width: 100%;
    max-width: 700px;
}
.svg__box {
    position: relative;
    padding: 100px 0;
}
.hello__svg {
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    fill:none;
    stroke:#fff;
    stroke-linecap:round;
    stroke-miterlimit:10;
    stroke-width:48px;
    stroke-dasharray: 5800px;
    stroke-dashoffset: 5800px;
    animation: anim__hello linear 4s forwards;
    width: 100%;
    justify-content: center;
    flex-direction: column;
    margin: 0 auto;
    text-align: center;
}
.hello__svg2 {
    position: absolute;
    top:61%;
    left: 50%;
    transform: translate(-50%, -50%);
    fill:none;
    stroke:#fff;
    stroke-linecap:round;
    stroke-miterlimit:10;
    stroke-width:48px;
    stroke-dasharray: 1600px;
    stroke-dashoffset: 1600px;
    animation: anim__hello2 linear 4s forwards;
    width: 100%;
    justify-content: center;
    flex-direction: column;
    margin: 0 auto;
    text-align: center;
    display: none;
    transition: all 3s;
    overflow: visible;
}

@keyframes anim__hello {
    0% {stroke-dashoffset: 5800;}
    100% {stroke-dashoffset: 0;}
}
@keyframes anim__hello2 {
    0% {stroke-dashoffset: 1600px;}
    100% {stroke-dashoffset: 0;}
}

const hello = document.querySelector('.hello__svg');
setInterval(hello__function, 10000);
function hello__function()
{
  hello.style.display = 'none';
  setTimeout(function(){ hello.style.display = 'flex'; }, 5000);
}
const hello2 = document.querySelector('.hello__svg2');
setInterval(hello__function2, 10000);
function hello__function2()
{
  hello2.style.display = 'flex';
  setTimeout(function(){ hello2.style.display = 'none'; }, 5000);
}

Comments

[Ankhena]

display не анимируется.
Зато анимируется прозрачность.

[steef08]

Ankhena, анимируется через FadeIn FadeOut в html будет выдаваться opacity="0.987654321", я просто не знаю как это интегрировать в код

[Ankhena]

steef08, нет.
fadeIn и fadeOut это функции JQ, в которых написано, что сначала нужно убрать прозрачность и потом поменять display.
Вы можете написать ровно тоже самое в стилях. Манипулируйте классами, а не пишите свойства в js. Ведь тогда не нужно будет даже думать о том, флекс там был или грид или просто блок или что-то ещё.

Answer 1

[FrelFrloich]

hello.style.opacity = "0";
hello.style.transition = "0s all ease";
  setTimeout(function () {
   hello.style.opacity = "1";
   hello.style.transition = "0.3s all ease";
  }, 100);

Comments

[steef08]

Спасибо!