We can explain how to attain animation through lightening component which is support on the mobile phone. Please do the below steps you can access possible.
Step -1: First to download the ‘lightningdesignsystem’ zip file into ‘Static Resource’. Please refer this link: https://www.lightningdesignsystem.com/downloads/
Step -2: Create New lightening application.
To include CSS file from static resource highlighted in the red color text.
<aura:application >
<ltng:require styles=”/assets/styles/salesforce-lightning-design-system.min.css” />
<div>
<div style=”width:400px;height:150px;”>
<c:FlipCard borderColor=”#FF4B4B” bgColor=”#FF4B4B” fontColor=”#FFF” frontText=”Merfantz Technologies Pvt Ltd at Chennai” backText=”Difference Brings Innovation…” />
</div>
<div style=”width:400px;height:150px;”>
<c:FlipCard borderColor=”#114141″ bgColor=”#114141″ fontColor=”#FFF” frontText=“Salesforce.com Technology” backText=”Number #1 Customer Relationship Management in the World…!!! ” isVerticalFlip=”true”/>
</div>
</div>
</aura:application>
Step -3: Create new lightening component.
<aura:component >
<aura:attribute type=”string” name=”bgColor” />
<aura:attribute type=”string” name=”fontColor” default=”#000″/>
<aura:attribute type=”string” name=”borderColor” default=”#000″/>
<aura:attribute type=”string” name=”frontText” />
<aura:attribute type=”string” name=”backText” />
<aura:attribute type=”boolean” name=”isVerticalFlip” default=”false” description=”By default its Horizontal flip” />
<div class=”{! ‘slds flip-container ‘ + (v.isVerticalFlip == false ? ‘horizontal’ : ‘vertical’) }” style=”{! ‘background-color:’+ v.bgColor+’; color: ‘+ v.fontColor+’;border : 1px solid ‘+ v.borderColor}”>
<div class=”flipper”>
<div class=”front”>
{!v.frontText}
</div>
<div class=”back”>
{!v.backText}
</div>
</div>
</div>
</aura:component>
Step – 4: Create css file.
.slds.THIS{
padding : 10px;
margin : 10px;
display: inline-block;
border-radius: 15px;
text-align: center;
font-size : 2em;
}
.THIS .flip-container {
perspective: 1000px;
}
/* hide back while swapping*/
.THIS .front, .THIS .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.THIS.flip-container, .THIS .front, .THIS .back {
width: 100%;
height: 100%;
}
.THIS .front {
z-index: 2;
}
/* Flip Speed */
.THIS .flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.THIS.flip-container.horizontal:hover .flipper, .THIS.flip-container.horizontal.hover .flipper {
transform: rotateY(180deg);
}
.THIS.horizontal .front {
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.THIS.horizontal .back {
transform: rotateY(180deg);
}
.THIS.flip-container.vertical:hover .flipper, .THIS.flip-container.vertical.hover .flipper {
transform: rotateX(180deg);
}
.THIS.vertical .front {
transform: rotateX(0deg);
}
/* back, initially hidden pane */
.THIS.vertical .back {
transform: rotateX(180deg);
}
Step – 5: Run the application you can get the below output. It have tried this feature, so kindly let us know if you have any query.
We are the ISV Partners and Please reach us for custom development => www.merfantz.com
——————————***** Thank You***** ——————————–
Author Bio
