vue 过渡效果

最新推荐文章于 2023-07-24 10:08:12 发布

Jookerone

最新推荐文章于 2023-07-24 10:08:12 发布

阅读量51

点赞数

分类专栏： javascript Vue

本文链接：https://blog.csdn.net/qq_45178972/article/details/116671976

版权

javascript 同时被 2 个专栏收录

122 篇文章 1 订阅

订阅专栏

Vue

39 篇文章 0 订阅

订阅专栏

<transition name="transition-name">
		需要过渡效果的DOM
		<div id="box">....</div>
</transition>
css样式
#box{
	opacity:1;
}

//v-show或v-if为true时添加transiton-name-enter-active,  false时添加transiton-name-leave-active
.transiton-name-enter-active,.transiton-name-leave-active{
	transition:opacity 0.5s
}
.transition-name-enter,transtion-name-leave-to{
	opacity:0
}

菜鸟网站的demo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.fade-enter-active, .fade-leave-active {
    transition: opacity 2s
}
.fade-enter, .fade-leave-to /* .fade-leave-active, 2.1.8 版本以下 */ {
    opacity: 0
}
</style>
</head>
<body>
<div id = "databinding">
<button v-on:click = "show = !show">点我</button>
<transition name = "fade">
    <p v-show = "show" v-bind:style = "styleobj">动画实例</p>
</transition>
</div>
<script type = "text/javascript">
var vm = new Vue({
    el: '#databinding',
    data: {
        show:true,
        styleobj :{
            fontSize:'30px',
            color:'red'
        }
    },
    methods : {
    }
});
</script>
</body>
</html>

Jookerone

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 过渡效果

<transition name="transition-name"> 需要过渡效果的DOM <div id="box">....</div></transition>css样式#box{ opacity:1;}//v-show或v-if为true时添加transiton-name-enter-active, false时添加transiton-name-leave-active.transiton-name-enter-active
复制链接

扫一扫

专栏目录