css3+less隨機(jī)動(dòng)畫(huà)總結(jié)

Mertens 發(fā)布于2019-08-30 14:07 / 2166人閱讀

摘要：前言有個(gè)動(dòng)畫(huà)需求，有幾個(gè)，需要不同時(shí)，不同幅度移動(dòng)，用了實(shí)現(xiàn)重點(diǎn)使用，內(nèi)可嵌入代碼，獲得的內(nèi)容可以做名字，也可以當(dāng)作數(shù)字參與的其他計(jì)算，但是獲得的內(nèi)容不能當(dāng)作名字編譯前編譯后總結(jié)在

前言

有個(gè)動(dòng)畫(huà)需求，有幾個(gè)div，需要不同時(shí)，不同幅度移動(dòng)，用了css3+less實(shí)現(xiàn)

重點(diǎn)

使用~``，``內(nèi)可嵌入js代碼，獲得的內(nèi)容可以做keyframes 名字，也可以當(dāng)作數(shù)字參與less的其他計(jì)算，但是獲得的內(nèi)容不能當(dāng)作class名字

編譯前

.move (@random) {
    @name: ~`"an-div-move-@{random}"`;
    @keyframes @name {
        0% {
            transform: translate(0, 0);
        }
        50% {
            transform: translate(0, @random/1000+.3rem);
        }
        100% {
            transform: translate(0, 0);
        }
    }
    @s: ~`Math.random()`;
    animation: @name linear 8s infinite @s*5*1s;
}

.div-1 {
    .move( `~Math.round(Math.random()*1000)`);
}

.div-2 {
    .move(~`Math.round(Math.random()*1000)`);
}

.div-3 {
    .move(~`Math.round(Math.random()*1000)`);
}

編譯后

.div-1 {
  animation: an-div-move--611 linear 8s infinite 4.82357906s;
}
@keyframes an-div-move--611 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, -0.311rem);
  }
  100% {
    transform: translate(0, 0);
  }
}
.div-2 {
  animation: an-div-move-493 linear 8s infinite 1.7538035s;
}
@keyframes an-div-move-493 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0.793rem);
  }
  100% {
    transform: translate(0, 0);
  }
}
.div-3 {
  animation: an-div-move-557 linear 8s infinite 4.65403445s;
}
@keyframes an-div-move-557 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0.857rem);
  }
  100% {
    transform: translate(0, 0);
  }
}

總結(jié)

在vue-cli中不能使用，直接less編譯可以，可以用在webpack自己配置的項(xiàng)目中
但是不知道為什么可以這么寫(xiě)，沒(méi)找到官方的說(shuō)明