wip #6194 @1:00 animation label question multiple

diff --git a/js/quiz.screens.js b/js/quiz.screens.js
index 83d5055d06ba9b3653cd2c9740c295c01baf0e71..c6806927153572d19eb09e1dec282055ed44cd5e 100644 (file)
--- a/js/quiz.screens.js
+++ b/js/quiz.screens.js
@@ -149,6 +149,10 @@ QuizScreens.prototype = {
                 ease: "power1.inOut",
                 stagger: .15
             }, .7)
+            .to(".active-screen .list-item .content", {
+                autoAlpha: 1,
+                stagger: .1
+            }, "<+=.3")
             .to(".active-screen .footer-question", {
                 y: 0,
                 duration: 1,

diff --git a/style/103-question-multiple.sass b/style/103-question-multiple.sass
index d0a2d32025b6e28f76c650ec8691a5fbfd2f7b1e..e42c80f271917258cd9479a42f0f6bd2e042511d 100644 (file)
--- a/style/103-question-multiple.sass
+++ b/style/103-question-multiple.sass
@@ -14,12 +14,12 @@
                 height: 58px
                 @extend .radius
                 +opacity(.80,background-color,$neutral-color)
-                +flex-config(space-between,false,false,center)
                 padding: 0 16px
                 cursor: pointer
                 border: 2px solid rgba($texts-color, .24)
                 position: relative
                 overflow: hidden
+                display: flex
                 &:after
                     content: ""
                     width: 100%
@@ -34,6 +34,10 @@
                     +opacity(.24,background-color,$ok-color)
                 *
                     z-index: 1
+                .content
+                    opacity: 0
+                    width: 100%
+                    +flex-config(space-between,false,false,center)
 
             input:checked+label
                 border-color: $texts-color

diff --git a/views/screens/question_multiple.blade.php b/views/screens/question_multiple.blade.php
index ba09318897b270cddbe5e89b6d12a0738e8a3a48..fe38b09e4906ce0079e44b52c38fb60adf79976d 100644 (file)
--- a/views/screens/question_multiple.blade.php
+++ b/views/screens/question_multiple.blade.php
@@ -9,8 +9,10 @@
                                name="answer"
                                id="question-{{$position.$key}}" class="none" value="{{$key}}">
                         <label for="question-{{$position.$key}}" aria-keyshortcuts="{{$alphabet[$key]}}">
-                            <span class="relative">{{$answer['answer']}}</span>
-                            <span class="access">{{$alphabet[$key]}}</span>
+                            <span class="content">
+                                <span class="relative">{{$answer['answer']}}</span>
+                                <span class="access">{{$alphabet[$key]}}</span>
+                            </span>
                         </label>
                     </li>
                 @endforeach
@@ -21,5 +23,5 @@
         <img src="{{$theme->standardImage}}"/>
         <img class="mobile question-multiple" src="{{$theme->standardImageMobile}}"/>
     </div>
-    @include('footer', ['question' =>$question, 'data' => $data, 'reset' => true, 'info' => true])
+    @include('footer', ['question' => $question, 'data' => $data, 'reset' => true, 'info' => true])
 </div>