为了在vue里做个轮播图,找遍了网页博客,终于找到一个看的懂得文章
具体轮播图的做法参考原文地址:点击这里
vue过渡效果相关:
v-if:条件渲染,将元素删除再渲染出来。
v-show:条件展示,display=none掉,再展示出来;
v-key:vue区分元素的唯一元素标识,必须设置,否则相同的名字的标签只会瞬间改变内容。
transition标签:会检查这个标签内是否用了css过度动画,从而添加/删除css类名,将需要过渡的标签放在里面,按条件v-key或v-if显示到底是哪一个标签进行过度动画。
transition-group标签:可以同时渲染整个列表,比如v-for出来的元素。里面可以设置个如:tag=‘p’改变标签形式,在浏览器中显示为p标签。里面的元素必须设置v-key。
过渡的-CSS-类名:
会有 6 个(CSS)类名在 enter/leave 的过渡中切换
v-enter:定义进入过渡的开始状态。在元素被插入时生效,在下一个帧移除。
v-enter-active:定义过渡的状态。在元素整个过渡过程中作用,在元素被插入时生效,在 transition/animation完成之后移除。 这个类可以被用来定义过渡的过程时间,延迟和曲线函数。
v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入一帧后生效(于此同时 v-enter
被删除),在 transition/animation
完成之后移除。v-leave:定义离开过渡的开始状态。在离开过渡被触发时生效,在下一个帧移除。
v-leave-active:定义过渡的状态。在元素整个过渡过程中作用,在离开过渡被触发后立即生效,在 transition/animation
完成之后移除。 这个类可以被用来定义过渡的过程时间,延迟和曲线函数。v-leave-to:2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发一帧后生效(于此同时 v-leave
被删除),在 transition/animation
完成之后移除。
javascript钩子函数:
过渡组件提供了 JavaScript 钩子函数 这些钩子函数将在恰当的时机被调用。