Html-Vue动画效果演示

废话不多说直接上代码再解释:
Html-Vue动画效果演示首先先引入vue.js再新建Vue实例对象,由于本次是两个动画效果演示所以有两个Vue实例对象,分别在两个div标签里面分别创建两个transition标签并对其name属性赋值(随便取名字)。看CSS样式代码下面说明name作用。
Html-Vue动画效果演示为name属性赋值后,我就只用其中一个CSS样式说明(上图).fadein-enter-active可以理解为入场效果并用其中的animation为其定义一个名称fadein-in空格后面是延时(延时不同入场效果时间长短不同).fadein-leave-active与enter相反即离场效果,在下面我们再用@keyframes加定义好的名称fadein-in制作一个缩放效果(这里要注意一下缩放效果之前一定要在要缩放效果的字体或者其他事物上加上一个style样式即display:inline-block)这样一个简单的缩放效果就做好了,是不是很简单啊!其他动画效果就自己慢慢摸索吧!加油哦~
Html-Vue动画效果演示