代码之家 › 专栏 › 技术社区 › Joel Hoelting

带有SCSS循环的Vue.js转换不工作

sass vue.js

Joel Hoelting · 技术社区 · 5 年前

我正在将SCSS文件导入到app.vue组件中。我正在使用SCSS循环创建多个CSS类,然后使用Vue转换来动画元素。使用以下组件:

Home.vue

<template>
  <div>
    <transition name="fade-direction-100" enter-active-class="fade-up-1000-enter-active">
      <h1 v-if="show">Hello World</h1>
    </transition>
  </div>
</template>

<script>

export default {
  name: 'home',
  data() {
    return {
      show: false
    };
  },
  mounted: function() {
    this.show = true;
  }
};
</script>

这是预期的工作和h1元素动画不透明度和translatex。但是,如果我将所有类放在同一个循环中,则转换不会产生动画效果:

// This works

@for $i from 1 through 10 {
  .fade-up-#{$i * 100}-enter-active,
  .fade-up-#{$i * 100}-leave-active {
    transition-duration: #{$i * 100}ms;
    opacity: 1;
    transform: translateY(0);
    transition-property: all;
    transition-timing-function: ease;
  }
}

@for $i from 1 through 10 {
  .fade-direction-#{$i * 100}-enter,
  .fade-direction-#{$i * 100}-leave-to {
    opacity: 0;
    transform: translateY(#{$i * 100}px);
  }
}

// But this fails

@for $i from 1 through 10 {
  .fade-up-#{$i * 100}-enter-active,
  .fade-up-#{$i * 100}-leave-active {
    transition-duration: #{$i * 100}ms;
    opacity: 1;
    transform: translateY(0);
    transition-property: all;
    transition-timing-function: ease;
  }

  .fade-direction-#{$i * 100}-enter,
  .fade-direction-#{$i * 100}-leave-to {
    opacity: 0;
    transform: translateY(#{$i * 100}px);
  }
}

我不明白为什么单独的循环可以工作,但是在同一个循环中创建多个类会失败。在这两种情况下,正在编译相同的CSS。为什么两个单独的循环会起作用,但将每个人置于一个循环中会失败?

链接到回购: Repository

编辑:

以下SCS按预期工作:

@for $i from 1 through 10 {
  .fade-up-#{$i * 100}-enter-active,
  .fade-up-#{$i * 100}-leave-active {
    transition: all #{$i * 100}ms ease;
  }

  .fade-direction-#{$i * 100}-enter,
  .fade-direction-#{$i * 100}-leave-to {
    opacity: 0;
    transform: translateY(#{$i * 100}px);
  }
}

1 回复 | 直到 5 年前

Phil 5 年前

更改的是生成的CSS中规则的顺序。

例如,第一个片段创建 向上的 规则,然后所有方向规则

.fade-up-100... { ... }
.fade-up-200... { ... }
.fade-up-...

.fade-direction-100... { ... }
.fade-direction-200... { ... }
.fade-direction...

第二个代码片段创建了交替的 向上的 和方向规则

.fade-up-100... { ... }
.fade-direction-100... { ... }
.fade-up-200... { ... }
.fade-direction-200... { ... }

你看到的是CSS cascading order 在游戏中。在你的第一个片段中, fade-direction-100-enter 以后会来的 fade-up-1000-enter-active 及其相互冲突的规则(即 opacity )会赢的。

在第二个片段中, 淡出-1000-输入-激活 出现的时间比 淡入淡出-方向-100-回车 .

免责声明:我对转换类很糟糕,每次我接近主题时都要阅读文档100次,但一般来说,似乎您不应该指定任何具体的状态(例如 不透明度 )在您的 -active 课程。这些类是你定义行为的地方,例如 transition .