(window.webpackJsonp=window.webpackJsonp||[]).push([[228],{555:function(t,a,s){"use strict";s.r(a);var e=s(3),n=Object(e.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"vue中使用animate-css库"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#vue中使用animate-css库"}},[t._v("#")]),t._v(" vue中使用Animate.css库")]),t._v(" "),a("h2",{attrs:{id:"自定义过渡类名"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#自定义过渡类名"}},[t._v("#")]),t._v(" 自定义过渡类名")]),t._v(" "),a("p",[t._v("我们可以通过以下 attribute 来自定义过渡类名：")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("enter-class")])]),t._v(" "),a("li",[a("code",[t._v("enter-active-class")])]),t._v(" "),a("li",[a("code",[t._v("enter-to-class")]),t._v(" (2.1.8+)")]),t._v(" "),a("li",[a("code",[t._v("leave-class")])]),t._v(" "),a("li",[a("code",[t._v("leave-active-class")])]),t._v(" "),a("li",[a("code",[t._v("leave-to-class")]),t._v(" (2.1.8+)\n"),t._v("\n他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如 "),a("a",{attrs:{href:"https://daneden.github.io/animate.css/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Animate.css"),a("OutboundLink")],1),t._v("结合使用十分有用。")])]),t._v(" "),a("h2",{attrs:{id:"使用animate-css库"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#使用animate-css库"}},[t._v("#")]),t._v(" 使用Animate.css库")]),t._v(" "),a("div",{staticClass:"language-html line-numbers-mode"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("transition")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("name")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("custom-classes-transition"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("enter-active-class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("animated tada"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("leave-active-class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("animated bounceOutRight"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-if")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("show"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("hello"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("p")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("transition")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),a("div",{staticClass:"line-numbers-wrapper"},[a("span",{staticClass:"line-number"},[t._v("1")]),a("br"),a("span",{staticClass:"line-number"},[t._v("2")]),a("br"),a("span",{staticClass:"line-number"},[t._v("3")]),a("br"),a("span",{staticClass:"line-number"},[t._v("4")]),a("br"),a("span",{staticClass:"line-number"},[t._v("5")]),a("br"),a("span",{staticClass:"line-number"},[t._v("6")]),a("br"),a("span",{staticClass:"line-number"},[t._v("7")]),a("br")])]),a("p",[t._v("按 "),a("a",{attrs:{href:"https://github.com/daneden/animate.css",target:"_blank",rel:"noopener noreferrer"}},[t._v("官方文档"),a("OutboundLink")],1),t._v(" 引入Animate.css库，再配合vue的自定义过渡类名，指定"),a("code",[t._v("enter-active-class")]),t._v("和"),a("code",[t._v("leave-active-class")]),t._v("的自定义类，两者都要有"),a("code",[t._v("animated")]),t._v("类，用于说明其使用的是Animate.css库，再根据需求定义另外一个"),a("code",[t._v("动画类名")]),t._v("。")]),t._v(" "),a("p",[t._v("动画类名：在 "),a("a",{attrs:{href:"https://daneden.github.io/animate.css/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Animate官网"),a("OutboundLink")],1),t._v(" 获取。")]),t._v(" "),a("h2",{attrs:{id:"demo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#demo"}},[t._v("#")]),t._v(" Demo")]),t._v(" "),a("p",{staticClass:"codepen",staticStyle:{height:"265px","box-sizing":"border-box",display:"flex","align-items":"center","justify-content":"center",border:"2px solid",margin:"1em 0",padding:"1em"},attrs:{"data-height":"265","data-theme-id":"light","data-default-tab":"html,result","data-user":"heBody","data-slug-hash":"JjdXBmy","data-pen-title":"vue中使用animate.css库"}},[a("span",[t._v("See the Pen "),a("a",{attrs:{href:"https://codepen.io/heBody/pen/JjdXBmy"}},[t._v("\n  vue中使用animate.css库")]),t._v(" by heBody ("),a("a",{attrs:{href:"https://codepen.io/heBody"}},[t._v("@heBody")]),t._v(")\n  on "),a("a",{attrs:{href:"https://codepen.io"}},[t._v("CodePen")]),t._v(".")])]),t._v(" "),a("script",{attrs:{async:"",src:"https://static.codepen.io/assets/embed/ei.js"}})])}),[],!1,null,null,null);a.default=n.exports}}]);