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: '',

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

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