脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue appear用法

vue中appear的用法

 更新时间：2017年08月17日 14:06:27   作者：有一个王小森  
这篇文章主要介绍了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
   appear
   appear-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 axios数据请求get、post方法及实例详解

    vue axios数据请求get、post方法及实例详解

    axios是一个基于Promise,同时支持浏览器端和Node.js的HTTP库，常用于Ajax请求。这篇文章主要介绍了vue axios数据请求get、post方法的使用 ,需要的朋友可以参考下
    2018-09-09
  • 如何理解Vue简单状态管理之store模式

    如何理解Vue简单状态管理之store模式

    状态管理也就是数据状态管理，vue应用程序的各组件之间经常需要进行通信，除了v-on、EventBus等通信方式外，可以采用数据共享的方式进行通信。这种简单的数据共享模式就是store模式。
    2021-05-05
  • 解决vue 界面在苹果手机上滑动点击事件等卡顿问题

    解决vue 界面在苹果手机上滑动点击事件等卡顿问题

    这篇文章主要介绍了vue 界面在苹果手机上滑动点击事件等卡顿解决方案，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11
  • VUE设置和清除定时器的方式及遇到的问题

    VUE设置和清除定时器的方式及遇到的问题

    ​最近需要再页面里做个倒计时,发现用clearInterval()清除定时器失效,下面这篇文章主要给大家介绍了关于VUE设置和清除定时器的方式及遇到的问题的相关资料,需要的朋友可以参考下
    2022-10-10
  • vue中 el-table每个单元格包含多个数据项处理

    vue中 el-table每个单元格包含多个数据项处理

    vue项目中,我们需要在el-table中显示数组数据,有的时候,需要在一个单元格中显示多条数据,如何实现呢,对vue el-table单元格相关知识感兴趣的朋友一起看看吧
    2023-11-11
  • 利用vue + element实现表格分页和前端搜索的方法

    利用vue + element实现表格分页和前端搜索的方法

    众所周知Element 是一套 Vue.js 后台组件库，它能够帮助你更轻松更快速地开发后台项目。下面这篇文章主要给大家介绍了关于利用vue + element实现表格分页和前端搜索的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-12-12
  • vue路由传参页面刷新参数丢失问题解决方案

    vue路由传参页面刷新参数丢失问题解决方案

    这篇文章主要介绍了vue路由传参页面刷新参数丢失问题解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-10-10
  • 详解VUE项目中安装和使用vant组件

    详解VUE项目中安装和使用vant组件

    这篇文章主要介绍了VUE安装和使用vant组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • Vue使用axios引起的后台session不同操作

    Vue使用axios引起的后台session不同操作

    这篇文章主要介绍了Vue使用axios引起的后台session不同操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • Vue3 setup中使用$refs的方法详解

    Vue3 setup中使用$refs的方法详解

    在 Vue 3 中的 Composition API 中,$refs 并不直接可用于 setup 函数,但是实际工作中确实有需求,那么该如何解决呢,本文为大家整理了两个方案,希望对大家有所帮助
    2023-08-08

最新评论