Vue显示和隐藏如何用动画形式显示_vue显示隐藏动画效果_imkaifan的博客

相关文章推荐

想出国的大象 · vue ...· 1 月前 ·

无聊的莴苣 · Vue 中 $set() 与 ...· 1 月前 ·

坚韧的跑步鞋 · Layui ...· 1 月前 ·

挂过科的镜子 · VUE 使用 select ...· 1 月前 ·

风度翩翩的大海 · vue中vuedraggable拖拽插件使用 ...· 1 月前 ·

坚强的骆驼 · 敲钟在即地平线能搏出好估值？ - ...· 1 月前 ·

谦和的数据线 · 重庆鲲鹏支付服务有限公司· 2 月前 ·

爱健身的木瓜 · “普京主义”推出政治强国模式-新华网· 8 月前 ·

风度翩翩的排球 · 民政部党史学习教育专题· 1 年前 ·

温柔的桔子 · 教你如何鉴别转基因大米_蚂蚁· 1 年前 ·

< div id = "app" > < button class = "btn" @click = "show = !show" > click < / button > < transition name = 'fade' > < div class = "box1" v - if = "show" > < div class = "box2" > < / div > < / div > < / transition > < / div > < / template > < script > export default { data ( ) { return { show : true < / script > < style lang = "less" > . box1 { width : 200 px ; height : 200 px ; background - color : green ; // position: absolute; // overflow: hidden; . box2 { width : 50 px ; height : 50 px ; background - color : red ; position : fixed ; // top: 60px; // left: 30px; . fade - enter - active , . fade - leave - active { transition : 1 s ; . fade - enter , . fade - leave - to { opacity : 0 ; transform : translateX ( - 25 rem ) ; < / style >

然后：发现固定定位仿佛是对

过渡效果类似于推拉门：<template> <div id="app"> <button class="btn" @click="show = !show">click</button> <transition name='fade'> <div class="box1" v-if="show"> <div class="box2"></div>

前阶段页面涉及到了一些数据的隐藏和显示，数据的新增删除等一些基本的操作，数据的隐藏和显示可以用fadeOut、fadeIn、slideDown、slideUp等动画方法来实现，而数据删除和新增的动画，可以使用transtion和transition-group来实现，之前没怎么用过这两个属性，特此来记录一下使用过程以及遇到的一些小的问题。 1、首先我们先做一些准备工作，先实现一个div的隐藏和显示： HTML：我们使用template标签将要显示和隐藏的元素包裹起来，然后使用v-if进行判断temp值为tr

vue 显示隐藏动画的实现首先给文字绑定一个click事件showInfo，给你需要进行添加动画的view添加animation并且传一个值animationData给他同时需要在data中赋初值animationData: {}，在onload中进行this.animation = uni.createAnimation({})，这样就完成动画的创建。然后在点击事件showInfo的方法中进行动画的设置，最后用export将动画传给animationData，这样就完成了动画实现。需要注意的是

<template> <div v-if="show" :class="{ showAni: show, closeAni: closeStatus }" > <div class="content"></div> </template> <script> export default { data() { return { show: false, closeSta.

<button @click="isShow = !isShow"> 显示 / 隐藏 </button> <transition name="hello" appear> <h1 v-show="isShow">你好啊！</h1> </transition> </template> <script> export

Vue 通过条件渲染指令可以控制元素的显示和隐藏。常见的条件渲染指令有v-if、v-else-if和v-else。在模板中，我们可以使用v-if指令来根据数据的真假值进行条件渲染，如果为true就渲染该元素，否则就不渲染。例如： ```html <template> <p v-if="isShow">这是要显示的内容</p> </template> 当isShow属性为true时，就会把`<p>`元素渲染出来，否则就不会显示。 v-else-if指令和v-else指令可以实现多个条件的选择渲染。例如： ```html <template> <p v-if="isShow">这是要显示的内容</p> <p v-else-if="isShow2">这是第二个要显示的内容</p> <p v-else>这是要隐藏的内容</p> </template> 当isShow属性为true时，就会把第一个`<p>`元素渲染出来；当isShow2属性为true时，就会把第二个`<p>`元素渲染出来；当前两个属性都为false时，就会把第三个`<p>`元素渲染出来。此外，我们还可以使用v-show指令来实现元素的显示和隐藏。和v-if不同的是，v-show不是通过添加和删除DOM节点来实现的，而是通过修改CSS属性display的值来控制元素的显示和隐藏。例如： ```html <template> <p v-show="isShow">这是要显示的内容</p> </template> 当isShow属性为true时，就会把`<p>`元素显示出来；当isShow属性为false时，就会把`<p>`元素隐藏起来。需要注意的是，v-show指令不支持v-else-if和v-else指令。