Vuejs:如何只在加载第一页时加载css动画

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属性的数据中创建一个标志。可以称之为CCD_ 3。添加一个在登录后将其关闭的功能，类似于：

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

如果要关闭动画，请调用this.turnOffAnimate。现在，在您的htmldiv中，以这种方式绑定类：

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

这个条件意味着只有当animate标志为true时，div才会拥有square类。您可以在vue中阅读更多关于类绑定的内容。