vue中appear的用法

关于appear的用法和enter的用法相似，它只是在第一次渲染的时候才会起作用。看完整的代码：
别忘了引用vue.js

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>初始渲染的过渡</title><script src="vue.js"></script>
</head>
<style>.custom-appear-active{color: #2fe26d;background: #b6b6b6;transition: all 1s ease;}.custom-appear{font-size: 40px;color: #e069e2;background: #7798e2;}.custom-appear-to{color: #e29138;background: #1c8942;}
</style>
<body>
<div id="app"><transition
            appearappear-class="custom-appear"appear-to-class="custom-appear-to"appear-active-class="custom-appear-active"><p>appear</p></transition></div>
<script>new Vue({el: "#app"})
</script>
</body>
</html>

但是这里有一些问题：关于appear-class、 appear-to-class、 appear-active-class的相同属性那个起作用的问题。
四种情况：（与他们在style中的排列顺序有关系）
1、appear-class、 appear-to-class、 appear-active-class或者 appear-to-class、appear-class、 appear-active-class的排列顺序，此时只有appear-active-class的属性起作用。
2、appear-active-class、appear-class、 appear-to-class
此时appear-active-class的不起作用，由appear-class过渡到appear-to-class属性。
3、appear-class、appear-active-class、 appear-to-class
此时appear-class属性不起作用，由appear-active-class过渡到 appear-to-class属性。
4、 appear-to-class、 appear-active-class、appear-class
此时appear-to-class不起作用，由appear-class过渡到 appear-active-class属性。
enter也有相似的问题

vue中appear的用法相关推荐

vue中directives的用法
Vue中directives的用法关于 vue 中 directives 的用法问题,详细可以参考vue官方对directives的解释当前文章主要讲述directives怎么用,directiv ...
vue中定时器一般用法，定时器函数传参以及清除定时器
一.vue中定时器一般用法(举个例子) 显示当前时间, setInterval()方法会每秒执行一次函数,类似手表功能: <template><div class="use ...
vue中watch的用法
在vue中,使用watch来响应数据的变化.watch的用法大致有三种.下面代码是watch的一种简单的用法: <input type="text" v-model=&quo ...
vue中this.init用法_Vue中的this.$options.data()和this.$data用法说明
问题项目里遇到一个问题,用this.$options.data()重置组件data时,data()里用this获取的props或method都为undefined,代码简化如下: export de ...
vue中props的用法
vue使用props的用法日常编程中都会用到父组件用子组件.子用父的情况,下面先介绍一种子传父的情况 1.在父组件中 (1).首先是在其定义一个list属性以存储其数据值 (2).定义一个绑定属性& ...
vue中@oninput的用法
.vue文件其实是一个组件,今天这篇文章要讲的是.vue文件中监听input的输入值变化事件.需求是这页面中,改变input的值,就调用一个事件,第一想到的是oninput. oninput 事件在用 ...
vue中$root的用法
vue中$root是用来访问根组件的,用法: this.$root.根组件属性代码: main.js: new Vue({data(){return{isUpdate:true //根组件属性}}, ...
vue 中provide的用法_聊聊Vue中provide/inject的应用详解
众所周知,在组件式开发中,最大的痛点就在于组件之间的通信.在 Vue 中,Vue 提供了各种各样的组件通信方式,从基础的 props/$emit 到用于兄弟组件通信的 EventBus,再到用于全局数 ...
Vue中 $ref 的用法
ref 被用来给DOM元素或子组件注册引用信息.引用信息会根据父组件的 $refs 对象进行注册.如果在普通的DOM元素上使用,引用信息就是元素; 如果用在子组件上,引用信息就是组件实例注意:只要想 ...
vue中$bus的用法及$emit、$on、$off的使用
vue中 $bus 一般与 $emit. $on. $off 连用,一般用在任意组件间的通信,即 $bus 用来传递非父子关系的数据. 如两个组件之间传递数据: 子组件1 this.$bus.$emi ...

vue中appear的用法

vue中appear的用法相关推荐

最新文章

热门文章