Vue 进入/离开动画

1、示例代码

（注：写到vue单文件中了）

<template><div><button v-on:click="show = !show">Toggle</button><transition name="fade"><p v-if="show">hello</p></transition></div>
</template>
<script>export default {data: function() {return {show: true}}}
</script>
<style>.fade-enter-active,.fade-leave-active {transition: opacity .5s}.fade-enter,.fade-leave-to {opacity: 0}
</style>

2、说明

（1）需要transition 标签包裹。

（2）6个class状态

（3）效果：

Vue 进入/离开动画相关推荐

vue中过渡动画（类名实现方式）
vue中过渡动画分为两类,一类是进场动画,一类是出场动画要实现上面的进场动画,主要有三种方式:类名,css动画库,js函数类名本质就是动态添加类名实现动画在进入/离开的过渡中,会有 6 个 c ...
vue中实现动画效果--三种方式
一.普通动画实现效果用一个按钮, 控制一个 div 的淡入和淡出步骤使用 js 控制 div 的 class name 点击 function anime() {var boxDom = do ...
Vue实战项目开发--Vue中的动画特效
项目的源代码在GitHub上:点击查看目录 vue中的css动画原理在Vue中使用Animate.css库在Vue中同时使用过渡属性和动画 Vue中的Js动画与Velocity.js的结合 Vu ...
通过示例了解Vue过渡和动画
作者:Matt Maribojoc 译者:前端小智来源:stackabuse 有梦想,有干货,微信搜索 [大迁世界] 关注这个在凌晨还在刷碗的刷碗智. 本文 GitHub https://githu ...
vue中transition动画（移动端页面切换左右滑动效果）
例子一:(简单进入和离开动画) demo1 <template><div><button @click="isShow = !isShow">显 ...
Vue 中 CSS 动画原理
下面这段代码,是点击按钮实现hello world显示与隐藏 <div id="root"><div v-if="show">hello ...
02_使用jq实现进入和离开动画
创建进入时的动画: 这一步很简单 index.html: <!DOCTYPE html> <html lang="en"><head><m ...
基于VUE的SVG动画处理（一）
基于VUE的SVG动画处理(一) 提示:涉及vue.photoshop.svg动画一.创建SVG文件方法一:使用photoshop绘制所需接线图,导出svg格式. 第一种:快速导出SVG编辑-&g ...
vue判断离开当前页面_vue离开当前页面触发的函数代码
vue离开当前页面触发的函数代码我就废话不多说了,大家还是直接看代码吧~ destroyed(){ console.log('销毁') } 补充知识:vue中进入路由页面和离开路由页面后执行函数进 ...

Vue 进入/离开动画

Vue 进入/离开动画相关推荐

最新文章

热门文章