美文网首页
VUE过渡效果

VUE过渡效果

作者: ForeverYoung_06 | 来源:发表于2019-11-05 16:48 被阅读0次

VUE有封装好的组件,当你需要展示或者隐藏或者渲染某个内容,可以给他外层包裹一层transition

  <button v-on:click="show = !show">
    Toggle
  </button>

  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>

CSS中

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

这样点击按钮Toggle会使hello逐渐消失,其实就是CSS3的应用。

Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡

条件渲染 (使用 v-if)
条件展示 (使用 v-show)
动态组件
组件根节点

也有更加详细的进入/离开过渡的具体某一阶段自定义事件,参见VUE官网文档
https://cn.vuejs.org/v2/guide/transitions.html

相关文章

  • 过渡&&动画总结

    一. vue的过渡与动画 Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。过渡效果的应用...

  • Vue中多个元素或组件的过渡

    Vue中多个元素的过渡 Vue中多个组件的过渡(通过动态组件实现组件的过渡动画效果)image.png

  • VUE过渡效果

    VUE有封装好的组件,当你需要展示或者隐藏或者渲染某个内容,可以给他外层包裹一层transition CSS中 这...

  • Vue-(6)过渡 & 动画

    过渡 Vue在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。Vue 提供了内置的过渡封装组件,该...

  • Vue过渡动画

    vue可以在元素或组件进入和消失的时候提供过渡效果 使用过渡: vue会自动嗅探目标元素是否应用了 CSS 过渡或...

  • vue进入/离开 & 列表过渡

    vue进入/离开 & 列表过渡 Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。包括以下...

  • Vue快速入门(五:CSS过渡)《快乐Vue》

    CSS过渡 Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。Vue 提供了 transi...

  • 动画组件

    用vue自带的 实现过渡效果 利用 CSS 过渡或者动画来实现 利用 JavaScript 的钩子函数...

  • 【Vue3 从入门到实战 进阶式掌握完整知识体系】019-Vue

    四、Vue中的动画 1、使用 Vue 实现基础的 CSS 过渡与动画效果 过渡:比如说一个 div 的背景颜色从红...

  • vuew 2.0动画

    动画(过渡) Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。 1. 单组件/元素过渡 ...

网友评论

      本文标题:VUE过渡效果

      本文链接:https://www.haomeiwen.com/subject/wjhebctx.html