2022-09-09 20:41:18 +00:00
< template >
< div >
2022-12-19 11:57:07 +00:00
< Head >
< Title > Vue StyleClass Directive < / Title >
< Meta name = "description" content = "StyleClass manages css classes declaratively to during enter/leave animations or just to toggle classes on an element." / >
< / Head >
< div >
< div class = "content-section introduction" >
< div class = "feature-intro" >
< h1 > StyleClass < / h1 >
< p > StyleClass manages css classes declaratively to during enter / leave animations or just to toggle classes on an element . < / p >
< / div >
< AppDemoActions / >
2022-09-09 20:41:18 +00:00
< / div >
< / div >
2022-12-19 11:57:07 +00:00
< div class = "content-section implementation" >
< div class = "card" >
< h5 > Toggle Class < / h5 >
< Button v -styleclass = " { selector : ' @ next ' , toggleClass : ' p -disabled ' } " label = "Toggle p-disabled" / >
< InputText class = "block mt-3" / >
2022-09-09 20:41:18 +00:00
2022-12-19 11:57:07 +00:00
< h5 > Animations < / h5 >
< Button v -styleclass = " { selector : ' .box ' , enterClass : ' hidden ' , enterActiveClass : ' my -fadein ' } " label = "Show" class = "mr-2" / >
< Button v -styleclass = " { selector : ' .box ' , leaveActiveClass : ' my -fadeout ' , leaveToClass : ' hidden ' } " label = "Hide" / >
< div class = "box hidden" > Content < / div >
< / div >
2022-09-09 20:41:18 +00:00
< / div >
2022-12-08 12:26:57 +00:00
2022-12-19 11:57:07 +00:00
< StyleClassDoc / >
< / div >
2022-09-09 20:41:18 +00:00
< / template >
< script >
import StyleClassDoc from './StyleClassDoc.vue' ;
export default {
components : {
StyleClassDoc
}
} ;
< / script >
< style lang = "scss" scoped >
. box {
background - color : var ( -- green - 500 ) ;
color : # ffffff ;
width : 100 px ;
height : 100 px ;
display : flex ;
align - items : center ;
justify - content : center ;
padding - top : 1 rem ;
padding - bottom : 1 rem ;
border - radius : 4 px ;
margin - top : 1 rem ;
font - weight : bold ;
box - shadow : 0 2 px 1 px - 1 px rgba ( 0 , 0 , 0 , 0.2 ) , 0 1 px 1 px 0 rgba ( 0 , 0 , 0 , 0.14 ) , 0 1 px 3 px 0 rgba ( 0 , 0 , 0 , 0.12 ) ;
}
@ keyframes my - fadein {
0 % {
opacity : 0 ;
}
100 % {
opacity : 1 ;
}
}
@ keyframes my - fadeout {
0 % {
opacity : 1 ;
}
100 % {
opacity : 0 ;
}
}
. my - fadein {
animation : my - fadein 150 ms linear ;
}
. my - fadeout {
animation : my - fadeout 150 ms linear ;
}
< / style >
