vue css动画原理
从隐藏到显现
从显现到隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue中的动画</title>
<style>
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 3s;
} </style>
</head>
<body>
<div id="app">
<transition name="fade">
<div v-if="show">hello world</div>
</transition>
<button @click="handleBtnClick">change</button>
</div> <!-- 开发环境版本，包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript"> var app = new Vue({
el: '#app',
data: {
show: true
},
methods: {
handleBtnClick: function() {
this.show = !this.show;
}
}
}) </script>
</body>
</html>
动画由transition标签包裹，class中的名字由transition的name属性来定，例如name = "fade",则class名为.fade-enter,如果没有name,则默认class名为v-, 例如.v-enter, .v-enter-active
vue css动画原理的更多相关文章
- Vue的css动画原理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue中css动画原理
显示原理: <transition name='fade'> <div v-if='show'>hello world</div> </transition& ...
- CSS动画原理及硬件加速
一.图层 图层即层叠上下文,具体概念和应用大家可以看我之前转自张鑫旭大神博客的<CSS层叠上下文和层叠顺序>,这里我们简单复习一下产生层叠上下文的原因. 1.根层叠上下文 指的是页面根元素 ...
- 36纯 CSS 动画原理，在页面上表现日蚀现象
原文地址:https://segmentfault.com/a/1190000015070543 感想: 动画,背景颜色 HTML code: <div class="sky" ...
- 如何利用 CSS 动画原理，在页面上表现日蚀现象
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/OELvrK 可交互视频教 ...
- 前端每日实战：36# 视频演示如何利用 CSS 动画原理，在页面上表现日蚀现象
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/OELvrK 可交互视频教程 此视频 ...
- vue css动画
.toggle-cart-enter-active, .toggle-cart-leave-active { transition: all .3s ease-out; } .toggle-cart- ...
- CSS动画小结
CSS动画 原理:1.画面之间变化 2.视觉暂留作用 常见问题 1.CSS 动画的实现方式有几种 1.transition 2. keyframes(animation) 2.过渡动画和关键帧动画 ...
- vue 动画原理 part1
Vue动画原理 增加和删除css增加样式实现一个过渡效果也就是动画效果 1.需要动画效果的标签外包裹一个transition标签 会被自动分析css样式,然后自动构建一个动画流程 transition ...
随机推荐
- python数字图像处理（一）图像的常见操作
首先导入必要的库,使用Opencv读入图像,避免复杂的图像解析,同时使用Opencv作为算法的对比,由于使用环境为jupyter使用matplotlib直接可视化 import cv2 import ...
- java基础之轻松搞定反射
前言 java的名词太古怪.反射白话文解释,就是把一个字符串的类名,实例化,少了个new单词. 反射步骤 准备一个苹果类像这个样子. public class PingGuo { private St ...
- java两个数组内存图
- React 滚动事件
代码: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UT ...
- JavaSE---多线程---线程组
1.概述 1.1 Java中使用ThreadGroup表示线程组,可以对一批线程进行分类管理: Java运行程序直接对 线程组 进行控制,对线程组的控制相当于 同时控制这组线程: 一旦线程加入某一组 ...
- BeanUtils.copyProperties()拷贝属性时，忽略空值
把source的属性值复制给target的相同属性上,注意:双方需要复制的属性要有get.set方法 BeanUtils.copyProperties(source, target, PublicUt ...
- linux su su-的区别
su只是切换用户. su - 切换用户并切换shell环境. su another pwd后为/home/current su - another pwd后为/home/another
- delphi遍历指定目录下指定类型文件的函数
遍历指定目录下指定类型文件的函数// ================================================================// 遍历某个文件夹下某种文件,/ ...
- [CSP-S模拟测试]:金(king)（高精度+模拟）
题目传送门(内部题36) 输入格式 第一行一个整数$T$,表示数据组数. 接下来$T$行,每行两个空格隔开的整数$n,m$. 输出格式 对于每组数据,输出一行$"Yes"$或$&q ...
- Linux桌面与命令行切换
1.首先在安装Linux的时候是选则Desktop桌面方式安装 2.切换命令 2.1快捷键:Ctrl+Alt+F1 切换到桌面模式 Ctrl+Alt+F3 切换到命令行模式