vue.js过渡(vue学习记录2)

pinecone 发布于2019-08-19 18:36 / 3566人阅读

html代码：

      hello

必须要添加CSS样式（该样式来控制状态）：

.expand-transition {
          transition: all .3s ease;
          height: 30px;
          padding: 10px;
          background-color: #eee;
          overflow: hidden;
        }
        .expand-enter, .expand-leave {
          height: 0;
          padding: 0 10px;
          opacity: 0;
        }

同时提供钩子：

    new Vue({
  el: "#demo",
  data: {
    show: true
  },
  transitions: {
    expand: {
      beforeEnter: function (el) {
        el.textContent = "beforeEnter"
      },
      enter: function (el) {
        el.textContent = "enter"
      },
      afterEnter: function (el) {
        el.textContent = "afterEnter"
      },
      beforeLeave: function (el) {
        el.textContent = "beforeLeave"
      },
      leave: function (el) {
        el.textContent = "leave"
      },
      afterLeave: function (el) {
        el.textContent = "afterLeave"
      }
    }
  }
})

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79757.html

初学vue.js记录

摘要：初学应该学习哪些知识主要学习基础知识。接下来要学习如何写函数，计算属性。事件处理与修饰符事件通过指令来绑定，在中事件为事件名，所以是很好记忆的。这时可通过来获取父组件传递的值并写入模板，父组件可通过在子组件写入属性的方式传递数据。前言本人刚开始学习vue.js几天，做了一些练习之后，鉴于每隔一段时间就把学习过的内容总结一番，故此写下此文章。初学Vue.js应该学习哪些知识 1、 v...

enda 2019-08-22 15:34 评论0 收藏0
VUE2.0学习笔记

摘要：添加事件侦听器时使用模式。只当事件是从侦听器绑定的元素本身触发时才触发回调。差别在哪里将特性名转换为从开始支持语法糖，会扩展成一个更新父组件绑定值的侦听器。如果需要条件渲染多个元素，可以使用包裹。 1.前言安装直接用引入（本地或者cdn） npm npm install vue vue-cli官方脚手架 # 全局安装 vue-cli $ npm install --glo...

pumpkin9 2019-08-23 14:38 评论0 收藏0
vue学习笔记（二）

摘要：供用户在相应的阶段对其进行操作。我们像下面这样使用这个指令大多数情况下，我们只需要使用与钩子函数。里提供了函数的简写形式钩子函数有两个常用的参数和。其他用法与全局自定义指令一致。一、vue生命周期 vue实例从创建到销毁的过程，称为生命周期，共有八个阶段。这八个阶段里分别有一个叫做钩子函数的实例选项。供用户在相应的阶段对其进行操作。 beforeCreate(){ //组件实例刚...

klivitamJ 2019-08-30 13:48 评论0 收藏0
vue学习笔记（二）

摘要：供用户在相应的阶段对其进行操作。我们像下面这样使用这个指令大多数情况下，我们只需要使用与钩子函数。里提供了函数的简写形式钩子函数有两个常用的参数和。其他用法与全局自定义指令一致。一、vue生命周期 vue实例从创建到销毁的过程，称为生命周期，共有八个阶段。这八个阶段里分别有一个叫做钩子函数的实例选项。供用户在相应的阶段对其进行操作。 beforeCreate(){ //组件实例刚...

Pines_Cheng 2019-08-21 17:08 评论0 收藏0
vue学习笔记（二）

摘要：供用户在相应的阶段对其进行操作。我们像下面这样使用这个指令大多数情况下，我们只需要使用与钩子函数。里提供了函数的简写形式钩子函数有两个常用的参数和。其他用法与全局自定义指令一致。一、vue生命周期 vue实例从创建到销毁的过程，称为生命周期，共有八个阶段。这八个阶段里分别有一个叫做钩子函数的实例选项。供用户在相应的阶段对其进行操作。 beforeCreate(){ //组件实例刚...

ideaa 2019-08-01 17:48 评论0 收藏0