使用SASS mixins与不同的父级进行增量过渡延迟

编程问答 2022-08-15

问题描述

我想将过渡延迟自动增加到类名为“ animate”的任何元素上，我的问题是我的“ animate”类具有不同的父级。有没有一种方法可以使用SASS mixin自动递增，而与父级无关？

int i;
for (i=0; i<width; i++) {
    image[i] = calloc(height,sizeof(RGBTRIPLE));
}

预先感谢

解决方法

我认为您可能需要代替一个替代品。

这是使用Sass变量的一种方法，它在export default { methods: { addCard() { //... const card = { //... filename: '',} this.cards.push(card) new Dropzone('#dropzone',{ init() { this.on('addedfile',file => { card.filename = file.upload.filename }) } }) } } } 循环内递增0.25。这需要在HTML中手动设置类名称，即@for，.animate-1等：

.animate-2

另一种方法是使用JS，因此您无需更改HTML：

$counter: 0.25;

@for $i from 1 through 3 {
  $counter: $counter + 0.25;

  .animate-#{$i} {
    transition-delay: $counter + s;
  }
}

const animate = document.querySelectorAll('.animate');
let increment = 0.25;

animate.forEach((i,index) => {
  i.style.transitionDelay = increment + 's';
  increment += 0.25;
  console.log(`element ${index + 1} transition-delay: `,i.style.transitionDelay);
})

mixinsmixinssasssass