Shulou(Shulou.com)06/01 Report--

This article editor for everyone to introduce in detail "vue how to achieve the animation effect of book page turning", the content is detailed, the steps are clear, and the details are handled properly. I hope that this article "vue how to achieve the animation effect of book page turning" can help you solve your doubts.

The effect is as follows:

Keyword transform

The Transform attribute is applied to the 2D or 3D transformation of an element. This property allows you to rotate, scale, move, tilt, and so on.

The syntax is transform: none | * transform-functions*; We mainly use its rotation effect, we can write like this.

Transform: rotateY (90deg) / / indicates that animation is rotated 90 degrees along the Y axis

Since it is to achieve animation, then there must be the appearance of animation

The syntax of the animation attribute is: animation: name duration timing-function delay iteration-count direction fill-mode play-state; all we need to use is the first two attributes, name and duration, to specify the name of the Keyframe to be bound to the selector and the animation to be completed in how many seconds or milliseconds we can write

Animation: fanPre 2s

Using the @ keyframes rule, you can create an animation by gradually changing the setting of one CSS style to another. During the animation, you can change the setting of the CSS style several times, using% when the specified change occurs, or the keywords "from" and "to", which is the same as 0% to 100%.

The syntax is @ keyframes * animationname* {* keyframes-selector* {* css-styles;} *} we can write like this

@ keyframes fanPre {0% {transform: rotateY (0deg); background-color: rgba (122112112);} 50% {background-color: rgba (122112112);} 75% {background-color: rgba (122112112);} 100% {transform: rotateY (- 140deg); background-color: none;}} var

This var is not a var in JavaScript but a var in css. We can use it to continue data exchange between css and vue, and to set properties in css using data defined by vue, as shown below:

/ / html//javascriptprops: {speed: {type: String, default: "2s",} / / css animation: fanPre var (--speed); implementation

After knowing the above keywords, we can begin to achieve this effect. First, we need a list of book pages.

/ / list of book pages pagesList: {type: Array, default: () = > {return [{title: "Guan Yi", text: ["Guan Guan singing waterbirds live on sandbars in the river. A kind and beautiful girl, a good mate of a good man." The girl picks the vegetables with uneven length. The kind and beautiful girl always thinks of her when she wakes up. Miss the pursuit is not available, wake up in a dream long Acacia. Leisurely yearning love cut, it is difficult to sleep over and over again. " The girl picks the vegetables with uneven length. The kind and beautiful girl gets close to her by playing the piano and harp. " The girl will pick up the vegetables with uneven length. Kind and beautiful girl, ring the bell and beat the drum to please her. " ,}, {title: "Sound slowly searching", text: ["searching, desolate, miserable and sad. When it is warm and cold, it is the most difficult to stop. Three glasses of two light wines, how to rival him, the wind is urgent at night! wild geese are sad, but they know each other in the old days." "the ground is covered with yellow flowers, haggard and damaged, but now who is worthy of picking? guarding the window, how can you grow black alone! Indus and drizzle, to dusk, bit by bit. This time, how a sad word!" ,], {title: "the Eve of the Qingyu case", text: ["A thousand trees blossom in the east wind night. The stars fall like rain. BMW carvings incense all over the road. Phoenix Xiao sound, jade kettle light turn, one night fish and dragon dance." , "Moth snow willow gold wisp. The laughter is full of dark fragrance. The crowd is looking for him a thousand degrees. Suddenly look back, but the man is in the dim light." ,], {title: "the butterfly loves the flower to rest on the wind of the dangerous building", text: ["standing on the thin wind of the dangerous building, looking at the sorrow of spring, the sky is dark. In the residual light of grass smoke, who will be speechless?" "I plan to get drunk and sing to the wine, but the strong music is still tasteless. I will not regret it when I am getting wider and wider. I pined away for Iraq." ,], {title: "Rain Linling Farewell in Autumn", text: ["the cold cicada is sorrowful, the evening to the long pavilion, the early rest of the shower. Du men drink without a clue, nostalgia place, the blue boat urges it. Hold hands and look at the tearful eyes, but there is no language to choke. Read, thousands of miles of smoke, the twilight is heavy and the sky is wide." , "affectionate since ancient times hurt parting, more unbearable, snub Qingqiu Festival! where do you wake up tonight? Yang Liu an, the wind and the moon. This has gone for years, it should be a good day and a good scene. Even though there are thousands of amorous feelings, but also to whom to say",],},};}

Render the data to the page, as shown in the following example

{{nowPage.title}} {{t}}

The page flip function is implemented as follows: use currentPage to record the number of pages currently displayed, use flag to distinguish between the previous page and the next page, and perform the corresponding page flip operation. You should pay attention to the anti-shake operation of the click event to prevent the page from turning too fast. The specific code is as follows:

TurnPage (flag) {if (! this.canTurn) return; if (this.currentPage 0) {this.canTurn = false; setTimeout (()) > {this.canTurn = true;}, parseInt (this.speed) * 1000-100);} if (flag = 1) {if (this.currentPage)

< this.pagesList.length) { this.currentPage++; this.nextClick = true; this.lastClick = false; } } else { if (this.currentPage >

0) {this.currentPage--; this.nextClick = false; this.lastClick = true;}, complete code {{prePage.title}} {{t}}

{{item.title}} {{t}}

{{cover.title}} {{t}}

{{cover.title}} {{t}}

{{item.title}} {{t}}

{{nowPage.title}} {{t}}

Export default {name: "book", props: {width: {type: Number, default: 300,}, height: {type: Number, default: 400,}, speed: {type: String, default: "2s",}, / / Book Page list pagesList: {type: Array Default: () = > {return [{title: "Guanyu", text: ["off the singing waterbirds Upon an islet in the brook. A kind and beautiful girl, a good spouse of a good man. " The girl picks the vegetables with uneven length. The kind and beautiful girl always thinks of her when she wakes up. Miss the pursuit is not available, wake up in a dream long Acacia. Leisurely yearning love cut, it is difficult to sleep over and over again. " The girl picks the vegetables with uneven length. The kind and beautiful girl gets close to her by playing the piano and harp. " The girl will pick up the vegetables with uneven length. Kind and beautiful girl, ring the bell and beat the drum to please her. " ,}, {title: "Sound slowly searching", text: ["searching, desolate, miserable and sad. When it is warm and cold, it is the most difficult to stop. Three glasses of two light wines, how to rival him, the wind is urgent at night! wild geese are sad, but they know each other in the old days." "the ground is covered with yellow flowers, haggard and damaged, but now who is worthy of picking? guarding the window, how can you grow black alone! Indus and drizzle, to dusk, bit by bit. This time, how a sad word!" ,], {title: "the Eve of the Qingyu case", text: ["A thousand trees blossom in the east wind night. The stars fall like rain. BMW carvings incense all over the road. Phoenix Xiao sound, jade kettle light turn, one night fish and dragon dance." , "Moth snow willow gold wisp. The laughter is full of dark fragrance. The crowd is looking for him a thousand degrees. Suddenly look back, but the man is in the dim light." ,], {title: "the butterfly loves the flower to rest on the wind of the dangerous building", text: ["standing on the thin wind of the dangerous building, looking at the sorrow of spring, the sky is dark. In the residual light of grass smoke, who will be speechless?" "I plan to get drunk and sing to the wine, but the strong music is still tasteless. I will not regret it when I am getting wider and wider. I pined away for Iraq." ,], {title: "Rain Linling Farewell in Autumn", text: ["the cold cicada is sorrowful, the evening to the long pavilion, the early rest of the shower. Du men drink without a clue, nostalgia place, the blue boat urges it. Hold hands and look at the tearful eyes, but there is no language to choke. Read, thousands of miles of smoke, the twilight is heavy and the sky is wide." Affectionate since ancient times hurt farewell, even more unbearable, snub Qingqiu Festival! Tonight, where shall I find myself, waking from a hangover? against the riverbank lined with weeping willows, the moon sinking, and the dawn rising on a breeze. Year after year, I will be far away from you.All these beautiful scenes are unfolding, but to no avail. Even though there are thousands of amorous feelings, he even says to whom ",],},];}, / / book cover cover: {type: Object, default: () = > {return {title:" cover ", text: [" cover "],} }, data () {return {currentPage: 0, nextClick: false, lastClick: false, prePage: {}, nowPage: {}, canTurn: true, degs: "0deg", showCover: false,};}, mounted () {this.init ();}, methods: {init () {this.nowPage = this.cover }, getBookStyle () {let res = ""; res + = "width:" + this.width + "px;"; res + = "height:" + this.height + "px;"; res + = "'- speed':" + this.speed + ";"; res + = "transform: rotate (" + this.degs + ");"; return res;}, getPageStyle (index) {let res = "" Res + = "z-index:" + (this.pagesList.length-index) +; "; return res;}, setPage (page, flag) {if (flag =-1) {this.prePage = this.pagesList [page-3] | | this.cover; this.nowPage = this.pagesList [page-1];} else {this.prePage = this.pagesList [page-2] | | this.cover | This.nowPage = this.pagesList [page] | | this.pagesList [this.pagesList.length-1];} let speed = this.speed; speed = parseInt (speed) * 1000-500; setTimeout () = > {if (this.currentPage = 1) {this.showCover = true;} if (this.currentPage = 0) {this.showCover = false } if (flag = =-1) {this.nowPage = this.pagesList [this.currentPage-1] | | this.cover; if (this.currentPage = 0) {this.degs = "0deg";}} else {this.degs = "- 5deg"; this.prePage = this.pagesList [this.currentPage-2] | | this.cover }, speed);}, turnPage (flag) {if (! this.canTurn) return; if (this.currentPage 0) {this.canTurn = false; setTimeout (() = > {this.canTurn = true;}, parseInt (this.speed) * 1000-100);} if (flag = 1) {if (this.currentPage)

< this.pagesList.length) { this.currentPage++; this.nextClick = true; this.lastClick = false; } } else { if (this.currentPage >

0) {this.currentPage--; this.nextClick = false; this.lastClick = true;}},},}; .j-book {background-color: gray; position: relative; box-shadow: 30px 0px 30px rgb (0,0,0,0.6) inset; transform: rotate (var (--degs)); color: # dec38f; .j-book-page-pre {position: absolute Width: 100%; height: 100%; z-index: 2; background-size: 100%; transform-origin: left; border-top-left-radius: 2px; border-bottom-left-radius: 2px; background-color: rgba (122,112112); transform: rotateY (- 140deg); .j-book-page {position: absolute; width: 100%; height: 100% } .j-book-pages {position: absolute; width: 100%; height: 100%; .turn-page-pre-ani {position: absolute; width: 100%; height: 100%; z-index: 2; background-size: 100%; transform-origin: left; border-top-left-radius: 2px; border-bottom-left-radius: 2px; transform: rotateY (0deg) Animation: fanPre var (--speed);} @ keyframes fanPre {0% {transform: rotateY (- 140deg); background-color: rgba (122112112);} 50% {background-color: rgba (122112112);} 100% {transform: rotateY (0deg); background-color: none } .turn-page-ani {position: absolute; width: 100%; height: 100%; z-index: 2; background-size: 100%; transform-origin: left; border-top-left-radius: 2px; border-bottom-left-radius: 2px; transform: rotateY (- 140deg); animation: fan var (--speed) } @ keyframes fan {0% {transform: rotateY (0deg); background-color: none;} 100% {transform: rotateY (- 140deg); background-color: rgba (122,112,112);} .j-book-page {position: absolute; width: 100%; height: 100%; top: 0 H4 {text-align: center;} p {}} .j-book-btns {position: absolute; bottom: 0; display: flex; justify-content: space-around; width: 100% }} here, the article "how to realize the animation effect of turning pages in vue" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.