下面是详细讲解“vue 组件中使用 transition 和 transition-group实现过渡动画”的完整攻略:
1. Vue 中的过渡动画
Vue 提供了一套内置的过渡和动画系统,可以方便地在组件切换和元素增删时添加过渡效果。在组件中使用过渡动画需要使用两个组件:<transition>
和 <transition-group>
。
1.1. <transition>
组件
<transition>
组件可以在元素从 DOM 中插入或者撤下时设置动画效果。使用 <transition>
组件可以很方便地添加进入和离开动画效果。
<transition>
组件有以下属性:
name
:用于设置动画的名称,该属性必须设置。通常设置为一个 class 名称。appear
:设置是否在初始渲染时执行动画。duration
:设置过渡动画的持续时间。enter-class
:设置进入动画的 CSS class。enter-active-class
:设置进入动画的过渡状态的 CSS class。leave-class
:设置离开动画的 CSS class。leave-active-class
:设置离开动画的过渡状态的 CSS class。type
:设置过渡类型,可以为transition
或animation
。
下面是一个使用 <transition>
组件设置进入和离开动画的例子:
<template>
<div>
<button @click="toggle">Toggle</button>
<transition name="fade">
<div v-if="show">Hello World</div>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
show: false
};
},
methods: {
toggle() {
this.show = !this.show;
}
}
};
</script>
<style>
.fade-enter-active {
transition: opacity 0.5s ease-out;
}
.fade-enter {
opacity: 0;
}
.fade-leave-active {
transition: opacity 0.5s ease-in;
}
.fade-leave-to {
opacity: 0;
}
</style>
在上面的代码中,当点击 Toggle
按钮时,<div>
元素会通过设置进入和离开动画过渡。在 style
标签中定义了 .fade-enter-active
、.fade-enter
、.fade-leave-active
、.fade-leave-to
四个 CSS class,分别表示进入过渡状态的样式、进入动画样式、离开过渡状态的样式、离开动画样式。
1.2. <transition-group>
组件
<transition-group>
组件能够在多个元素同时进行过渡时设置动画效果。
<transition-group>
组件有以下属性:
name
:用于设置动画的名称,该属性必须设置。通常设置为一个 class 名称。tag
:用于设置过渡元素的标签,默认为'span'
。appear
:设置是否在初始渲染时执行动画。duration
:设置过渡动画的持续时间。enter-class
:设置进入动画的 CSS class。enter-active-class
:设置进入动画的过渡状态的 CSS class。leave-class
:设置离开动画的 CSS class。leave-active-class
:设置离开动画的过渡状态的 CSS class。move-class
:设置移动动画的 CSS class。
下面是一个使用 <transition-group>
组件同时设置进入和离开动画的例子:
<template>
<div>
<button @click="add">Add Item</button>
<button @click="remove">Remove Item</button>
<transition-group name="list" tag="ul">
<li v-for="(item, index) in items" :key="item.id">{{ item.text }}</li>
</transition-group>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, text: "Item 1" },
{ id: 2, text: "Item 2" },
{ id: 3, text: "Item 3" }
]
};
},
methods: {
add() {
this.items.push({ id: Date.now(), text: "NewItem" });
},
remove() {
this.items.pop();
}
}
};
</script>
<style>
.list-enter-active,
.list-leave-active {
transition: all 0.5s ease-out;
}
.list-enter,
.list-leave-to {
opacity: 0;
transform: translateY(30px);
}
</style>
在上述代码中,<transition-group>
标签包含一个 v-for
循环,用于创建一组带有过渡动画的列表项。在 style
标签中定义了 .list-enter-active
、.list-enter
、.list-leave-active
、.list-leave-to
四个 CSS class,表示列表项进入过渡状态的样式、进入动画样式、离开过渡状态的样式、离开动画样式。当添加或删除列表项时,该列表项会有对应的过渡动画。
2. Vue 组件中使用 transition 和 transition-group 实现过渡动画的步骤
使用 transition
和 transition-group
实现过渡动画的步骤如下:
- 在组件中引入
transition
和transition-group
组件。 - 在模板中使用
transition
或transition-group
标签包裹需要添加动画的元素或组件。 - 在
transition
或transition-group
标签上设置相应的属性,如name
、duration
、appear
、enter-class
、enter-active-class
、leave-class
、leave-active-class
、type
等。 - 在
style
标签中为每个过渡状态或动画定义相应的 CSS class。
3. 示例
下面是两个示例,分别使用 transition
和 transition-group
实现过渡动画效果。
3.1. 使用 transition
实现过渡动画
在以下示例中,我们在组件 Fade
中使用 <transition>
组件创建一个过渡动画,为所有的动画类型使用了同样的 CSS Class。在 style
标签中定义了 .fade-enter-active
、.fade-enter
、.fade-leave-active
、.fade-leave-to
四个 CSS class,表示进入和离开动画时的过渡状态和 CSS 样式。
<template>
<div>
<button @click="show = !show">Toggle</button>
<transition name="fade">
<p v-if="show">Hello World</p>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
show: false
};
}
};
</script>
<style>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s ease-out;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>
3.2. 使用 transition-group
实现过渡动画
在以下示例中,我们在组件 List
中使用 <transition-group>
组件创建一个过渡动画,实现了多个子元素同时过渡的效果。在 style
标签中定义了 .list-enter-active
、.list-enter-to
、.list-leave-active
、.list-leave-to
四个 CSS class,表示进入和离开动画时的过渡状态和 CSS 样式。
<template>
<div>
<button @click="add">Add Item</button>
<button @click="remove">Remove Item</button>
<transition-group name="list">
<div v-for="item in list" :key="item">{{ item }}</div>
</transition-group>
</div>
</template>
<script>
export default {
data() {
return {
list: ["Item 1", "Item 2", "Item 3"]
};
},
methods: {
add() {
this.list.push(`Item ${this.list.length + 1}`);
},
remove() {
this.list.pop();
}
}
};
</script>
<style>
.list-enter-active,
.list-leave-active {
transition: all 0.3s ease-out;
}
.list-enter-to {
opacity: 1;
transform: translateY(0);
}
.list-leave-to {
opacity: 0;
transform: scale(0.5);
}
</style>
以上就是使用 transition
和 transition-group
实现过渡动画的完整攻略。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:vue 组件中使用 transition 和 transition-group实现过渡动画 - Python技术站