Question

在“主页”组件中，我有一个带有动画的<div>元素，如下所示：

<div class="square">
   //content
</div>

和CSS：

.square
height: 200px
width: 200px
margin: 0 auto
z-index: 0
position: absolute
top: 38vh
left: 43vw
margin-left:auto
margin-right:auto
animation-name: stretch
animation-duration: 0.3s
animation-timing-function: ease-out
animation-delay: 0
animation-direction: alternate
animation-fill-mode: forwards
animation-play-state: running

@keyframes stretch
from
  transform: scale (1)
to
  transform: scale(1.8)

这是一个不断扩大的简单正方形，内部还有其他<div>个元素。

现在，我只想在首次登录和打开应用程序时播放动画，而不是每次视图出现时都播放动画（就像现在正在工作一样）。

你能帮我吗？请不要把任何事情都视为理所当然，因为我是一个初学者。预先谢谢你。

Answer 1

很简单。在vue属性的数据中创建一个标志。您可以将其称为animate。添加一个将在登录后将其关闭的功能，例如：

data:{
   animate:true
   },
methods:{
   turnOffAnimate:{
      this.animate=false;
   }
}

要关闭动画时调用this.turnOffAnimate。现在，在您的html div中，以这种方式绑定该类：

<div :class="{square : animate}">
   //content
</div>

此条件意味着，仅当square标志为true时，您的div才会拥有animate类。您可以阅读有关class binding in vue的更多信息。

Answer 2

我假设您正在使用 Vue CLI和Single File Components进行项目 。您可以按照以下步骤创建所需的效果：

为动画创建一个组件。假设您创建了组件：

SquareAnimation.vue
将组件导入主页组件（或应用程序其余内容所在的组件）中，如下所示：

import SquareAnimation from "./SquareAnimation"

不要忘记将组件添加到 Vue实例，如下所示：

    export default {
      name: "HomePage",
      // Imported components
      components: {
          SquareAnimation,
      },
    }

将数据属性loading: true添加到您的首页组件中，如下所示：

    data() {
        return {
          // we'll use the "loading" property to toggle the pre-loader Square Animation
          loading: true, 
        };
    },

在首页文件组件的顶部，像这样添加SquareAnimation.vue组件：

    <!-- Square Animation component will show while property loading = true -->
    <SquareAnimation v-if="loading" />

    <div v-else>
      <!-- Here goes the rest of your app's content -->
    </div>

现在，动画应始终显示，因为loading:true属性在整个时间内的计算结果均为true。我们将创建一个将loading属性设置为false的方法，如下所示：

    methods: {
        // function to make preloader spinner for 1500 miliseconds
        preloaderAnimation() {
          // Sets the "loading" property to false after 1.5 seconds
          setTimeout(() => {
            this.loading = false; 
          }, 1500); // You can change the number to control animation's timer
        },
    },

如果正确执行了这些步骤，则应该让正方形动画在页面上加载1.5秒，然后在页面上显示应用的其余内容。希望对您有所帮助！

编码愉快！

Vue JS：如何仅在首页加载时加载CSS动画

2 个答案: