带有 Anime.js 动画按钮的 Vue.js

Question

我已经为一些按钮设置了样式，并希望使用 Anime.js 在 Vue 组件中为它们设置动画。

<div class="links">
			<a 
				class="button green" 
				href="#" 
				target="_blank"
				@mouseover="bouncyButtonEnter"
				@mouseout="bouncyButtonLeave">
				<svg viewBox="0 0 180 60">
					<path ref="buttonPath" d="M10,10 C10,10 50,9.98999977 90,9.98999977 C130,9.98999977 170,10 170,10 C170,10 170.009995,20 170.009995,30 C170.009995,40 170,50 170,50 C170,50 130,50.0099983 90,50.0099983 C50,50.0099983 10,50 10,50 C10,50 9.98999977,40 9.98999977,30 C9.98999977,20 10,10 10,10 Z"/>
				</svg>
				<span ref="buttonSpan">CodePen</span>
			</a>
			<a 
				class="button blue" 
				href="#" 
				target="_blank"
				@mouseover="bouncyButtonEnter"
				@mouseout="bouncyButtonLeave">
				<svg viewBox="0 0 180 60">
					<path ref="buttonPath" d="M10,10 C10,10 50,9.98999977 90,9.98999977 C130,9.98999977 170,10 170,10 C170,10 170.009995,20 170.009995,30 C170.009995,40 170,50 170,50 C170,50 130,50.0099983 90,50.0099983 C50,50.0099983 10,50 10,50 C10,50 9.98999977,40 9.98999977,30 C9.98999977,20 10,10 10,10 Z"/>
				</svg>
				<span ref="buttonSpan">Github</span>
			</a>
			<a 
				class="button red"
				href="#" 
				target="_blank"
				@mouseover="bouncyButtonEnter"
				@mouseout="bouncyButtonLeave">
				<svg viewBox="0 0 180 60">
					<path ref="buttonPath" d="M10,10 C10,10 50,9.98999977 90,9.98999977 C130,9.98999977 170,10 170,10 C170,10 170.009995,20 170.009995,30 C170.009995,40 170,50 170,50 C170,50 130,50.0099983 90,50.0099983 C50,50.0099983 10,50 10,50 C10,50 9.98999977,40 9.98999977,30 C9.98999977,20 10,10 10,10 Z"/>
				</svg>
				<span ref="buttonSpan">Contact</span>
			</a>
		</div>

<script>
import anime from "animejs";

export default {
  data() {
    return {};
  },
  methods: {
    bouncyButtonEnter: function() {
      anime.remove([this.$refs.buttonPath, this.$refs.buttonSpan]);
      anime({
        targets: this.$refs.buttonPath,
        d:
          "M10,10 C10,10 50,7 90,7 C130,7 170,10 170,10 C170,10 172,20 172,30 C172,40 170,50 170,50 C170,50 130,53 90,53 C50,53 10,50 10,50 C10,50 8,40 8,30 C8,20 10,10 10,10 Z",
        elasticity: 700,
        offset: 0
      });
      anime({
        targets: this.$refs.buttonSpan,
        scale: 1.15,
        duration: 800,
        offset: 0
      });
    },
    bouncyButtonLeave: function() {
      anime.remove([this.$refs.buttonPath, this.$refs.buttonSpan]);
      anime({
        targets: this.$refs.buttonPath,
        d:
          "M10,10 C10,10 50,9.98999977 90,9.98999977 C130,9.98999977 170,10 170,10 C170,10 170.009995,20 170.009995,30 C170.009995,40 170,50 170,50 C170,50 130,50.0099983 90,50.0099983 C50,50.0099983 10,50 10,50 C10,50 9.98999977,40 9.98999977,30 C9.98999977,20 10,10 10,10 Z",
        elasticity: 700,
        offset: 0
      });
      anime({
        targets: this.$refs.buttonSpan,
        scale: 1,
        duration: 800,
        offset: 0
      });
    }
  }
};
</script>

我正在尝试使用 Refs 的方法 bouncyButtonEnter 和 bouncyButtonLeave 来制作动画，并且它应该工作。我的问题是它只适用于一个按钮。我应该如何使它工作，以便每个按钮都会动画？

我在Sandbox也有一个代码

Answer 1

"ref" 只能引用一个元素。你可以用类来引用你的按钮。并在anime.js 目标中使用该类。类似querySelector(".button-span") 和querySelector(".button-path") 肯定对所有人都有效。

更新：哦，现在我清楚地了解您的需求。好吧，仅将其应用于悬停的按钮，您可以使用 event.target 仅在该元素上应用动画。以下是您的方法的外观。

methods: {
    bouncyButtonEnter: function(event) {
        anime.remove([this.$refs.buttonPath, this.$refs.buttonSpan]);
        anime({
            targets: event.target.querySelector("path"),
            ....

        });
        anime({
            targets: event.target.querySelector("span"),
            ...
        });
    },

    bouncyButtonLeave: function(event) {
        anime.remove([this.$refs.buttonPath, this.$refs.buttonSpan]);
        anime({
            targets: event.target.querySelector("path"),
            ....
        });
        anime({
            targets: event.target.querySelector("span"),
            ...
        });
    }  
}