Fork me on GitHub

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

解决vue中使用wow.js点击不显示的问题


这里上半部分是13种不同的点击显示动画,可是页面刷新后续点击并未如期而至
原因:wowjs的动画或自定义的动画默认只显示1次,在页面刷新便会触发,所以后续没有刷新的地方是不会触发的
解决方法:
* 第一种:在外层套一层div,div根据点击事件v-if 为true或false
* 第二种:使用动态class,根据点击事件实时将动画class加上
解决原理:手动刷新需要加载动画的部分,让其动画在初始化时展示

自定义动画示例

//自定义动画
@keyframes fadeInLeftDH {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeInDH {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeInRightDH {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.fadeIn {
  animation: fadeInDH ease-out 0.6s;
}
.fadeInLeft {
  animation: fadeInLeftDH ease-out 0.6s;
}
.fadeInRight {
  animation: fadeInRightDH ease-out 0.6s infinite;
}
@keyframes filterBlur {
  from {
    filter: blur(5px);
  }
  to {
    filter: blur(0);
  }
}
.filter-blur {
  animation: filterBlur 1s;
}
posted @   365/24/60  阅读(956)  评论(0编辑  收藏  举报
编辑推荐:
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
阅读排行:
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· PPT革命!DeepSeek+Kimi=N小时工作5分钟完成?
· What?废柴, 还在本地部署DeepSeek吗?Are you kidding?
· DeepSeek企业级部署实战指南:从服务器选型到Dify私有化落地
· 程序员转型AI:行业分析
点击右上角即可分享
微信分享提示