Vue显示和隐藏的过渡动画

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

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

示例代码:

<div id="app">
        <input type="button" value="按钮" @click="toggle">
        <transition name="fade">
            <div id="div1" v-show="isShow" transiton="fade"></div>
        </transition>
    </div>

  

.fade-enter-active, .fade-leave-active {
      transition: opacity .5s
}
.fade-enter, .fade-leave-active {
      opacity: 0
}

动画效果:

原文地址:https://www.cnblogs.com/liuwei54/p/9107078.html

时间: 2024-09-30 07:27:25

Vue显示和隐藏的过渡动画的相关文章

vue开发移动端项目 过渡动画问题

App.vue: <div id="app"> <div class="content"> <transition :name="transitionName" :duration="{ enter: 500, leave: 0 }"> <router-view class="transitionBody"></router-view> </

Vue.js 过渡 &amp; 动画

Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果. Vue 提供了内置的过渡封装组件,该组件用于包裹要实现过渡效果的组件. 首先是无过渡效果的动画 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> <style> span._active{ background:pink; } <

在RecyclerView列表滚动的时候显示或者隐藏Toolbar

先看一下效果: 本文将讲解如何实现类似于Google+应用中,当列表滚动的时候,ToolBar(以及悬浮操作按钮)的显示与隐藏(向下滚动隐藏,向上滚动显示),这种效果在Material Design 清单中有提到: "在合适的地方,当列表向下滚动,app bar可以退出屏幕,以便为内容区域留下更多的空间:而当列表向上滚动回来的时候,app bar又重新显示出来". 注:这里的向下滚动是指滚动到下面查看更多内容,相对应的手势操作其实是往上.同理向上滚动是指查看前面的内容,而手势其实是向下

Vue 过渡动画

<!DOCTYPE html> <html> <head> <title>过渡动画</title> <style type="text/css"> /*必须所有的元素 或者属性 0.3s 以ease的形式*/ .show-enter-active, .show-leave-active{ transition:all 1s ease; padding-left: 10px; } /*.show-enter 定义进入

VUE:过渡&amp;动画

VUE:过渡&动画 vue动画的理解 1)操作css的 trasition 或 animation 2)vue会给目标元素添加/移除特定的class 3)过渡的相关类名 xxx-enter-active:指定显示的transition xxx-leave-active:指定隐藏的transition xxx-enter/xxx-leave-to:指定隐藏时的样式 <!DOCTYPE html> <html> <head> <meta charset=&qu

vue的过渡动画

在 vue 中往往需要添加动画,但是并不像 JQ 一样可以比较容易的添加,经常我会避免使用动画,这样就不用考虑了,但是在类似轮播图中,还是需要动画效果 动画样式 1234567891011121314 .slider-enter-active { transform: translateX(0); transition: all 1s ease;}.slider-leave-active { 大专栏  vue的过渡动画transform: translateX(-100%); transitio

15jQuery学习笔记-----动画----层的显示和隐藏

show().hide()方法会显示.隐藏元素.用toggle()方法在显示.隐藏之 间切换 $(":button[value=show]").click(function() { $("div").show(); }); $(":button[value=hide]").click(function() { $("div").hide();}); 如果show.hide方法不带参数则是立即显示.立即隐藏,如果指定速度参数则会

jQuery元素的显示、隐藏及动画

1.hide()    隐藏元素        $("div").hide();            2.show()    显示元素        $("div").show();            3.toggle() 可以切换元素显示与隐藏        $("div").toggle();        4.slideDown() 滑动显示,将隐藏的元素滑动显示出来.        $("div").slideD

使用CSS3动画 animation 来控制元素的显示和隐藏

CSS3中 animation 和 transition 俩样式都能创建动画效果,而且是后台C++执行的,所以效率比普通jQuery的js模拟动画的效率高很多,所以建议大家能用css实现的效果都用css. transition的使用比较简单,这里就不介绍了,着重为大家介绍下 animation . animation 的css属性有很多,本文通过 animation-name 来控制启动动画和转换动画,以下是一个通过 animation 来控制元素的显示和隐藏的例子(仅支持webkit): <!