波纹动画css+js

最新推荐文章于 2024-10-04 13:18:14 发布

五条悟903

最新推荐文章于 2024-10-04 13:18:14 发布

阅读量92

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/qq_72085140/article/details/131535415

版权

本文介绍如何利用CSS和JavaScript创建一种视觉效果——波纹动画，常见于按钮点击反馈。通过CSS定义动画和过渡效果，结合JavaScript实现动态交互，让元素在被点击时产生向外扩散的波纹效果，提升用户界面的互动体验。

摘要由CSDN通过智能技术生成

<script>
export default {
  data() {
    return {
      isLoaded: false,
      waves: []  // 存储波纹元素
    };
  },
  mounted() {
    this.$nextTick(() => {
      // const button = this.$el.querySelector('.ripple-button');
      // this.startRipple({ target: button });
      this.startRipple();
      setTimeout(() => {
        this.startRipples();
      }, 200);
      setTimeout(() => {
        this.startRipples();
      }, 300);
      // setTimeout(() => {
      // this.startRipples();
      // }, 400);
      // setTimeout(() => {
      // this.startRipples();
      // }, 500);
      // setTimeout(() => {
      // this.startRipples();
      // }, 600);
      // setTimeout(() => {
      // this.startRipples();
      // }, 700);
    });
  },
  methods: {
    closePage() {
      // 关闭当前页面
      this.$router.go(-1);
    },
    startRipple() {
      const button = this.$el.querySelecto