css 一些在vue中应用的小动画效果

1.css在应用中一些小的动画效果： --- 间歇性的显示 隐藏

// 过渡效果： transition: all 1s;

2.dom间的动画效果：------改变间距 宽度 运动 方向 等

animation: shake 0.5s infinite; @keyframes shake { 0% { transform: translateX(0); } 50% { transform: translateX(15px); } 100% { transform: translateX(0); } }

3.添加dom之间的属性 class类 等应用 -----将元素旋转，缩放，移动，倾斜等

transform: translate(-200px, 480px) scale(0);

4.Vue 内置的动画标签 ---- transition 标签

• transition 标签只能包含 1 个 元素；如果里面写了多个元素，则只生效第一个
• transition 包裹的标签需要设置 v-show / v-if 属性控制元素的显示

详情看： blog.csdn.net/Superman_H/… 链接

1. name 属性：用于自动生成 CSS 动画类名。如果 transition 标签元素没有设置 name 属性，则对应的动画类名为 v-XXX；如果设置了 name 属性，则对应的动画类名为 属性值-XXX。
2. 进入：.v-enter 始状态、.v-enter-to 末状态、.v-enter-active 进入动画（Vue2）
3. 离开：.v-leave 始状态、.v-leave-to 末状态、.v-leave-active 离开动画（Vue2）

.fade-enter-active, .fade-leave-active { transition: opacity .3s; } ||| .fade-enter, .fade-leave-to { opacity: 0; }