Vue和原生Html简单实现淡入淡出动画效果
作者:互联网
一、Vue方法
只需给需要动画的标签绑定mouseleave和mouseenter事件来动态改变其opacity属性即可实现。
<div
id="Enter"
class="center"
@mouseleave="opac = 0"
@mouseenter="opac = 0.8"
:style="{ opacity: opac }"
>淡入淡出</div>
二、原生Html
同理,只需监听标签的onmouseover和onmouseout事件来动态改变其opacity属性即可实现。
<script type="text/javascript">
var enter = document.getElementById('Enter')
enter.onmouseover = function() {
enter.style.opacity = 0.8
}
enter.onmouseout = function() {
enter.style.opacity = 0
}
</script>
标签:opacity,function,style,Vue,onmouseout,淡入淡出,Html,enter 来源: https://www.cnblogs.com/qwfy-y/p/12717869.html