Vue动画没效果问题

问题：列表卡片翻转效果动画，只有第一次加载dom的时候执行一次。

1、点击列表中分页的时候，不管加载第几页的数据，翻转动画效果都不执行

2、点击卡片操作的时候，当前卡片的翻转效果消失了，其他改变的样式都是好的

3、单独点击卡片效果的显示了，然后再单击分页时，那个被单独操作的卡片，分页时的动画又没有了

解决：

动画css：

@keyframes fanzhuan{

from{ transform: rotateY(0）}

to{ transform: rotateY(180deg)}

}

@keyframes fanzhuan1{

from{ transform: rotateY(0）}

to{ transform: rotateY(180deg)}

}

.fanye{

animation:fanzhuan 0.5s linear 1 ;

}

.fanye1{

animation:fanzhuan1 0.5s linear 1 ;

}

js:

Vue 实例中data 中定义一个属性，用来控更新动画效果的执行，例如:isUpdate：false

点击分页加载数据成功时，给list赋值时，加，

this_.isupdate = false//每次数据加载完成，先把控制动画样式的isupdate设置成false

this_.$nextTick(function(){//如果不是更新dom，可不需要这个，$nextTick就是用来知道什么时候dom更新完成的

setTimeout(()=>{

this_.list = page.list

this_.update = true

}, 100)

})

html:

//红色标注的地方

解决以上2.3的方法是，重新定义.class,重新定义动画名称，不要方便使用一个，我就是因为一开始全用的一个，没有效果

Vue动画没效果问题相关推荐

javafx 动画没效果_通过JavaFX标注制作动画效果
javafx 动画没效果在本文中,您将学习如何使用JavaFX的动画API创建标注. 您可以在https://www.youtube.com/watch?v=XTHbB0LRdT4的 YouTube ...
关于vue动画没有效果的解决
有时使用动画时,动画可能动都不动这时添加 el.offsetHeight或许可以解决问题 <div id="app"><input type="but ...
vue动画效果配置和弹层css sticky footer
vue动画效果配置有两种方式: 一种是css方式需要注意 4 个(CSS)类名在 enter/leave 的过渡中切换: v-enter: 定义进入过渡的开始状态.在元素被插入时生效,在下一个帧移 ...
Vue动画的淡入淡出效果
今天呢,我们来利用vue动画实现以下淡入淡出效果在vue中,显示隐藏和创建移除,一个元素或者一个组件的时候,可以通过transition实现动画主要通过6个类名来控制进入(显示,创建) v-en ...
Vue 动画效果及 Animate的基本使用
Vue 动画效果及 Animate的基本使用运用原来的css代码编写动画,但是动画的类名在Vue是有规定,在进入的时候使用v-enter-active,离开的时候使用v-leave-active ...
深入理解Vue动画原理
深入讲解 Vue 动画原理文档过渡 & 动画轮播组件slides 轮播难点在于最末位到首位的切换方式,在讲轮播之前需要讲下动画. Vue动画支持很多种不同的方式. Vue动画方式1 - ...
vue基础：Vue动画
文章目录 vue动画前言什么是Vue动画,它能用在哪些场景? vue动画的两个状态切换进入( enter ) 退出;离开( leave ) vue动画为我们提供了什么? 要完成一个动画,我们还需 ...
vue动画过渡 javascript钩子函数详解
vue动画过渡js钩子函数详解前言 js钩子函数运行时间 js钩子函数的过渡或动画总结结语前言转载请注明出处并附上链接. 本文中,enter(leave)过程指的是beforeEnter.e ...
Vue动画工具及特效
vue动画部分,这部分难度主要在于动画代码的固定形式,比较繁琐复杂,举出几个实例. 1.单元素/组件的过渡资源包: <script src="node_modules/vue/dis ...

Vue动画没效果问题

Vue动画没效果问题相关推荐

最新文章

热门文章