鼠标移入 v-show 动画效果
时间: 2023-11-13 11:53:41 浏览: 39
可以通过在 v-show 指令中使用 transition 组件来实现鼠标移入时的动画效果。具体做法是给该 transition 组件添加 name 属性,并在样式表中定义该 name 对应的 CSS 动画。
例如,以下代码实现了当鼠标移入一个 div 元素时,该元素以渐变方式显示,移出时则以渐变方式隐藏:
```html
<template>
<div
class="wrapper"
@mouseenter="show = true"
@mouseleave="show = false"
>
<transition name="fade">
<div v-show="show" class="content">内容</div>
</transition>
</div>
</template>
<style>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>
<script>
export default {
data() {
return {
show: false,
};
},
};
</script>
```
相关问题
v-if和v-show动画
在 Vue.js 中,v-if 和 v-show 是用来控制元素显示和隐藏的指令。
v-if 会完全销毁和重新创建元素,因此它有更高的切换开销,但是它可以在切换过程中触发过渡动画。
v-show 则是通过设置元素的 display 样式来控制元素的显示和隐藏。因此它的切换开销较低,但是它不能触发过渡动画。
如果需要在切换时触发过渡动画,建议使用 v-if,如果只是简单的显示和隐藏元素,可以使用 v-show。
v-show 慢慢展开动画
如果你想要实现 v-show 慢慢展开的动画效果,可以使用 Vue.js 官方提供的 transition 组件,结合 CSS3 动画实现。
具体实现方式如下:
1. 在 v-show 控制的元素外层添加 transition 组件,设置 name 属性。
```html
<transition name="expand">
<div v-show="show">Hello World!</div>
</transition>
```
2. 在 CSS 中定义展开的动画效果,例如:
```css
.expand-enter-active,
.expand-leave-active {
transition: height 0.5s ease-in-out;
}
.expand-enter,
.expand-leave-to {
height: 0;
opacity: 0;
}
```
其中,.expand-enter-active 和 .expand-leave-active 用于定义动画过渡的时间和缓动函数,.expand-enter 和 .expand-leave-to 用于定义展开和收起时的样式。
这里的关键是利用 height 属性来实现动画。在展开时,将元素的高度从 0 逐渐增加到实际高度;在收起时,将元素的高度从实际高度逐渐减小到 0。
这样,当 v-show 的值从 false 变为 true 时,就会触发展开动画;当 v-show 的值从 true 变为 false 时,就会触发收起动画。