Question

我正在使用 vue-kinesis 为图像设置动画，我下面的组件工作正常，但动画实际上是直接使用 css 完成的。我应该如何更改我的配置以让 vue-kinesis 管理轮换？

另外，如何在 vue-kinesis 中全局配置 nuxt.config.js ？

<template>
  <kinesis-container>
    <kinesis-element type="depth" :strength="20">
      <v-img class="mb-5 image" src="/my-image.png" alt="Cell" />
    </kinesis-element>
  </kinesis-container>
</template>
<script>
import { KinesisContainer, KinesisElement } from 'vue-kinesis'
export default {
  components: {
    KinesisContainer,
    KinesisElement,
  },
}
</script>

<style scoped>
.image {
  -webkit-animation: spin 180s linear infinite;
  -moz-animation: spin 180s linear infinite;
  animation: spin 180s linear infinite;
}
@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}
@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
</style>

Answer 1

PS：看起来像在没有鼠标悬停的情况下设置动画是不可能的：https://github.com/Aminerman/vue-kinesis/issues/47#issuecomment-731059233
所以你应该坚持使用 CSS 旋转或使用 GSAP 等。

我为您制作了一个项目，您可以在此处找到：https://codesandbox.io/s/nuxt-vue-kinesis-00c4t?file=/pages/index.vue

配置非常基本，它遵循导入插件的 official way 并完美运行。

将 plugins: [{ src: '~/plugins/vue-kinesis.js', mode: 'client' }], 放入您的 nuxt.config.js 文件中。

将其放入 plugins/vue-kinesis.js：

import Vue from 'vue'
import VueKinesis from 'vue-kinesis'

Vue.use(VueKinesis)

并将您的 kinesis 调用到您的组件中，无需导入任何内容，因为我们现在拥有 components 配置属性！

模板归结为

<template>
  <div class="main">
    <kinesis-container>
      <kinesis-element type="rotate" :strength="20">
        <v-img
          class="mb-5 image"
          src="https://source.unsplash.com/500x350/?japan"
          alt="Cell"
        />
      </kinesis-element>
    </kinesis-container>
  </div>
</template>

如何使用 vue-kinesis 无限旋转图像？

1 个答案: