vue如何实现给文字或图标动态施加动画效果，或动态添加hover效果

本文主要是介绍vue如何实现给文字或图标动态施加动画效果，或动态添加hover效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Vue如何实现给文字或图标动态施加动画效果，或动态添加hover效果

先上效果图看下

有可能大家想要实现别的应用动画效果，但是掌握好这个技巧后基本可以适用许多简单的基础动画效果

先说下原理，其实这里用到的是vue中两个监听事件，分别是mouseover（鼠标悬停在指定元素上）和mouseout（鼠标离开指定元素后），
知道了这两个监听事件后，大家应该已经明白是怎么回事了吧
下面上代码

<span class="right-showout-icon iconfont" :style="{'color' : color, 'font-size' : size, 'cursor' : cursor, 	'transform' : transform, 'transition' : transition}"@mouseover="addStyle"@mouseout="removeStyle" @click="showRightSide">&#xe63c;</span>

可以看到，使用v-bind给style绑定属性后，里面的绑定值就变成了数据，我们通过监听鼠标悬停（mouseover）和鼠标离开悬停目标（mouseout）两个事件来改变style中样式绑定的数据即可动态的实现上面的动画效果。
下面是监听事件函数的书写方式

addStyle () {this.color = '#00aaff'this.size = '60px'this.cursor = 'pointer'},removeStyle () {this.color = ''this.size = ''this.cursor = ''}

是不是很简单，当然了，这些变量要提前在data中定义好

	  color: '',size: '',cursor: '',

这样，整个效果就完成啦！希望可以对你有帮助

如有更高效更简洁的方法还望大佬不吝赐教！

这篇关于vue如何实现给文字或图标动态施加动画效果，或动态添加hover效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---