Vue：过渡与动画

最新推荐文章于 2023-03-30 21:33:16 发布

蛋蛋只要变强不要秃

最新推荐文章于 2023-03-30 21:33:16 发布

阅读量200

点赞数 1

分类专栏：自学vue 文章标签： vue

本文链接：https://blog.csdn.net/Cindy___hhh/article/details/116001240

版权

transition组件
在CSS3中，过渡属性transition可以在一定时间内实现将元素的状态过渡为最终状态，但功能十分简单；动画属性animation可以制作更为复杂的动画。 Vue也实现了过渡和动画，Vue的过渡系统可以在元素从Dom中插入或移除时自动应用过渡效果。Vue.js会在适当的时机触发CSS过渡或动画。 Vue提供了内置的过渡封装组件transition，该组件用于包裹要实现过渡效果的组件。其基本用法是在动画的标签外面嵌套transition标签，并加上属性：

<transition> 	
	<!--需要动画的div标签--> 	
	<div></div> 
</transition>

当插入或删除包含在transition组件中的元素时，Vue会自动嗅探目标元素是否应用了CSS实现过渡或动画，如果是，则在恰当的时机添加/删除CSS类名。
Vue提供了六个CSS类名：v-enter, v-enter-active, v-enter-to, v-leave, v-leave-active, v-leave-to，示例如下：点击按钮Toggle切换句子的显示状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过渡与动画</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="demo">
        <button @click="show=!show">Toggle</button>
        <transition>
            <p v-if="show">愿风神忽悠你！</p>
        </transition>
    </div>
</body>
<style>
    .v-enter {
    
        opacity: 0;
    <

最低0.47元/天解锁文章

蛋蛋只要变强不要秃

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Vue：过渡与动画

transition组件在CSS3中，过渡属性transition可以在一定时间内实现将元素的状态过渡为最终状态，但功能十分简单；动画属性animation可以制作更为复杂的动画。 Vue也实现了过渡和动画，Vue的过渡系统可以在元素从Dom中插入或移除时自动应用过渡效果。Vue.js会在适当的时机触发CSS过渡或动画。 Vue提供了内置的过渡封装组件transition，该组件用于包裹要实现过渡效果的组件。其基本用法是在动画的标签外面嵌套transition标签，并加上属性：<transitio
复制链接

扫一扫

专栏目录