Vue中CSS动画原理
动画流程:(动画从无到有)
1.在动画即将被执行的一瞬间,会往内部的 div 添加 两个 class 名字,分别是 fade-enter 和 fade-enter-active;
2.当动画第一帧执行结束后,transition 标签分析知道这个 div 的动画效果,会在动画第二帧时做两件事:将之前添加的 fade-enter这个 class 标签去掉,再增加 fade-enter-to 这个标签;
3.动画继续执行,执行到结束的这一瞬间,Vue 会将之前添加的 fade-enter-active 和 fade-enter-to 去掉
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中CSS动画原理</title>
<script src='./vue.js'></script>
</head>
<body>
<div id ="root">
<transition name="fade">
<div v-if="s