代码

直接来代码吧........

组件Studnet.vue的代码为:

<template><div><button @click="isShow = !isShow">显示和隐藏</button><transition name="hello" appear><h1 v-show="isShow">你好呀</h1></transition></div>
</template><script>
export default {name: "Student",data() {return {isShow: true,};},
};
</script><style scoped>
h1 {background-color: yellow;
}
.hello-enter-active {animation: liujiayi 0.5s linear;
}
.hello-leave-active {/* animation: liujiayi 0.5s reverse linear; */animation: liujiayi 0.5s linear reverse;
}
@keyframes liujiayi {from {transform: translateX(-100%);}to {transform: translateX(0px);}
}
</style>

下面来分别介绍

每一个name都是独一无二的，如果写了name的话，下面的代码应该这样写

没写的话，直接统一

appear的话就是

请自行百度，它的完整写法是 :appear="true" 别忘了前面的:

过渡效果

和动画效果是效果显示是一样的

代码：

话不多说，上代码

Student2.vue代码如下：

<template><div><button @click="isShow = !isShow">显示和隐藏</button><transition name="hello" appear><h1 v-show="isShow">你好呀</h1></transition></div>
</template><script>
export default {name: "Student2",data() {return {isShow: true,};},
};
</script><style>
h1 {background-color: yellow;transition: 0.5s linear;
}
/* 进入的起点 */
.hello-enter {transform: translateX(-100%);
}
/* 进入的终点 */
.hello-enter-to {transform: translateX(0px);
}
/* 离开的起点 */
.hello-leave {transform: translateX(0px);
}
/* 离开的终点 */
.hello-leave-to {transform: translateX(-100%);
}
</style>

介绍：

这里------------------->

是其中一种写法，另一种写法为：

用哪个看自己喜欢

多个元素过渡(transition-group)

    <transition-group name="hello" appear><h1 v-show="isShow" key="1">你好呀</h1><h1 v-show="!isShow" key="2">刘家奕</h1></transition-group>

一定要写key

什么是动画效果？什么是过渡效果？相关推荐

P75-前端基础动画效果-过渡效果
P75-前端基础动画效果-过渡效果 1.概述这篇文章介绍动画效果其中的一个类型过渡效果. 2.过渡效果 2.1.过渡效果基础内容 <!DOCTYPE html> <html> ...
c语言实现图片过渡效果飞入,用css3实现转换过渡和动画效果
为什么要用css动画替换js动画导致JavaScript效率低的两大原因:操作DOM和使用页面动画. 通常我们会通过频繁的操作 DOM的CSS来实现视觉上的动画效果,导致js效率低的两个因素都包括在 ...
vue中的动画效果与过渡效果
目录一.动画效果 1.过程: 2.注意: 二.过渡效果三.多个元素过度四.第三方css库动画与过渡效果添加的六个属性: 1.v-enter-active:进入的整个过程都能响应的样式 2.v- ...
Vue 动画效果、过渡效果
文章目录动画效果过渡效果单个元素多个元素 Animate.css 总结 todolist 增加动画效果动画效果新建 Test.vue <template><div> ...
android自定义图片过渡效果,教你做出炫酷的Android动画效果
前言 Android动画也是Android系统中一个很重要的模块, 在平时开发中, 为了做出炫酷的效果, 动画可以说是必不可少的; 本文将总结Android中与动画相关的部分, 文中部分内容整理自文末 ...
vue实现多个元素或多个组件之间动画效果
2019独角兽企业重金招聘Python工程师标准>>> 多个元素的过渡 <style>.v-enter,.v-leave-to{opacity: 0;}.v-enter- ...
UIView之动画效果的实现方法（合集）
前言:在开发APP中,我们会经常使用到动画效果.使用动画可以让我们的APP更酷更炫,最重要的是优化用户体验,但取决于动画的质量.像QQ.微信.新浪微博等APP,动画效果就很好了,至少我很喜欢它们的动画 ...
悬停渐变特效html,CSS3 transition属性实现hover渐变动画效果
CSS3 transition属性实现hover渐变动画效果我们知道许多网页动态特效都是由FLASH或JQUERY之类的JS特效库实现的实际上现在CSS3也能实现很多类似效果了,只是在各种浏览器中兼 ...
深入理解 Vuejs 动画效果
本文主要归纳在 Vuejs 学习过程中对于 Vuejs 动画效果的各个相关要点.由于本人水平有限,如文中出现错误请多多包涵并指正,感谢.如果需要看更清晰的代码高亮,请跳转至我的个人站点的深入理解 V ...

什么是动画效果？什么是过渡效果？

代码

组件Studnet.vue的代码为:

下面来分别介绍

过渡效果

代码：

Student2.vue代码如下：

介绍：

多个元素过渡(transition-group)

什么是动画效果？什么是过渡效果？相关推荐

最新文章

热门文章