Vue过渡效果学习记录

最新推荐文章于 2024-04-02 14:17:32 发布

有言丶无信

最新推荐文章于 2024-04-02 14:17:32 发布

阅读量232

点赞数

分类专栏：学习记录文章标签： vue

本文链接：https://blog.csdn.net/a2390475429/article/details/106042785

版权

学习记录专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、实例

以菜鸟教程的过渡&动画开篇实例为例:

<!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>

二、代码分析

1.html标签

button
点击时将show值取反
transition
name属性指定了css类名的前缀，如该元素name属性指定为abc，则对应触发淡出时的类名为abc-leave-active。若不指定该属性，则默认为v-leave-active，但不推荐这么做，毕竟不可能全屏的过渡都使用一样的css
- p
  v-show属性根据传入的布尔值决定该元素是否显示，v-bind:style指定绑定的style样式

2.css类

淡出
第1帧:添加类fade-leave-active(指明过渡的动画样式)；
第2帧:添加类fade-leave-to(指明过渡的结束样式)，此时检测到样式发生变化，触发css过渡效果; ....
过渡结束:移除所有类，添加style样式display:none。
淡入
第1帧:去除style样式display:none，添加类fade-enter-active(指明过渡的动画样式)，添加类fade-enter；
第2帧:添加类fade-enter-to(指明过渡的结束样式)，移除类fade-enter，opacity值从0改为默认值1（除非fade-enter-to里指定了结束透明度），此时检测到样式发生变化，触发css过渡效果; ....
过渡结束:移除所有类。