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>

我尝试使用 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"),
            ...
        });
    }  
}

Vue.js与Anime.js动画按钮

1 个答案: