Hello! How to use Sass to create a more elegant solution for successively increasing the transition-delay the child elements?

Here, in order, as in the ZOE example, social network icons were consistently displayed. An example is the Zoe point .

 .myClass { &:nth-child(1) { transition: all 1s ease-out 0.5s; } &:nth-child(2) { transition: all 1s ease-out 0.7s; } &:nth-child(3) { transition: all 1s ease-out 0.9s; } &:nth-child(4) { transition: all 1s ease-out 1.1s; } &:nth-child(5) { transition: all 1s ease-out 1.3s; } }

    1 answer 1

    Sass has a management directive - @for . It can be used for such tasks. ( Codepen.io working example).

    Sass :

     //Создаём переменные для управления значениями $items: 4 $transition: 500ms //Каждому элементу будет прибавлять по 0.060s @for $i from 0 through $items &:nth-child(#{$i + 1}) transition-delay: $transition+(60ms*($i))

    Compiled version:

     * { margin: 0; padding: 0; } .wrapper { width: 100%; display: flex; justify-content: center; align-items: center; } .wrapper:hover .item { transform: translateY(50px); background-color: crimson; } .item { width: 100px; height: 100px; background-color: tomato; transition: 500ms; } .item:nth-child(1) { transition-delay: 500ms; } .item:nth-child(2) { transition-delay: 560ms; } .item:nth-child(3) { transition-delay: 620ms; } .item:nth-child(4) { transition-delay: 680ms; } .item:nth-child(5) { transition-delay: 740ms; } 
     <div class="wrapper"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>

    • Cool! Thank you very much! This is what I need :) - Make_dev
    • @Make_dev, was glad to help :) - Arthur