css3: transition

Author: kimown

closure/a.js

@@ -0,0 +1,12 @@
+/**
+ * Created by google on 16-10-27.
+ */
+
+'use strict';
+
+let test=function () {
+    console.log(1111);
+}
+
+
+exports.test=test;

closure/b.js

@@ -0,0 +1,15 @@
+/**
+ * Created by google on 16-10-27.
+ */
+
+'use strict';
+
+
+let test=function () {
+    console.log(1111);
+}
+
+
+module.exports={
+    test:test
+}

closure/index.js

@@ -0,0 +1,17 @@
+/**
+ * Created by google on 16-10-27.
+ */
+
+'use strict';
+
+let a;
+
+function test(temp) {
+    a = temp;
+    setInterval(function () {
+        console.log(a);
+    },1000)
+}
+
+
+exports.test = test;

closure/main.js

@@ -0,0 +1,14 @@
+/**
+ * Created by google on 16-10-27.
+ */
+
+'use strict';
+
+let aaa=require('./a').test;
+
+let bb=require('./b');
+
+
+aaa();
+// console.log(22);
+

coffee/a.coffee

@@ -0,0 +1,84 @@
+resizePages = (target, animate = true) -> # TODO: use target to target specific DOMs to transform - teng
+  logger.log "[FRESH] Resize pages"
+
+  smallScreen = DeviceHelper.isSmallScreen
+  header = $('#header-container')
+  headerSpacer = $('#header-spacer')
+
+  # header.after headerSpacer # Important for v4 - header spacer must be moved out of header-container
+
+  # Account for nav logo height on first page
+  if navAnimation()
+    hh = header.height() - 0
+    headerSpacer.show().css('height', hh)
+    logoHeight = $('#header-container .logo').height()
+    $('a.section-anchor').css('top',-hh+logoHeight+20)
+    $('a.section-anchor').first().css('top',-hh)
+    ###
+    if spacer.length == 0
+      spacer = $('<div class="spacer"></div>').prependTo( $('li.slide .container').first() )
+    hh = header.height() - 20
+    ###
+  else
+    headerSpacer.hide()
+
+  # BG editor on first slide
+  # fixBgEditor()
+
+  height = $(window).height()
+  # if smallScreen
+  #  height = if h < 640 then 640 else h
+
+  # Resize first section to fill the height of the screen
+  logger.log "[FRESH]: Resizing sections"
+  $('.s-title-section, li.slide:first-child .s-cta-section, li.slide:first-child .s-slider-section').each (i, el) ->
+    t = $(this); c = t.find('.container').first()
+    if t.hasClass 'no-resize' # This might appear here from containBackgroundImages
+      this.style.paddingTop = ''
+      this.style.paddingBottom = ''
+    else
+# Reset inline padding in order to calculate original padding from stylesheet
+      inlinePaddingTop = this.style.paddingTop
+      inlinePaddingBottom = this.style.paddingBottom
+      this.style.paddingTop = ''
+      this.style.paddingBottom = ''
+      # Ignore if the original (aka natural) padding is >100
+      origPaddingTop = Math.min(100, parseInt(t.css('padding-top'), 10))
+      origPaddingBottom = Math.min(100, parseInt(t.css('padding-bottom'), 10))
+      this.style.paddingTop = inlinePaddingTop
+      this.style.paddingBottom = inlinePaddingBottom
+
+      # Fix slogan slide for first slide
+      sectionHeight = height
+      if i == 0 && t.closest('li.slide').is(':first-child')
+        if smallScreen() then sectionHeight -= header.outerHeight()
+        else if header.is(':visible') then sectionHeight -= header.height()
+      else
+        if header.is(':visible') then sectionHeight -= (header.height() - getLogoHeight())
+
+      # HACKY: defer it because somehow DOM is not ready
+      window.setTimeout ->
+        return if t.hasClass 'no-resize' # This might appear here from containBackgroundImages in the delay time
+
+
+        if $(el).is('.s-slider-section')
+          current = $(el).find('.iosslider').data('current')
+          currentSlideHeight = $(el).find('.iosslider').find('.inner').get(current).outerHeight()
+          if　currentSlideHeight < sectionHeight
+            $(el).find('.iosslider').height(sectionHeight).css('min-height', sectionHeight+"px")
+          return
+
+        currentHeight = t.outerHeight()
+        # Disable adjustment if on mobile and resize is small
+        return if Math.abs(currentHeight - sectionHeight) < 64 && DeviceHelper.isSmallScreen()
+        # Adjust section height
+        pad = (sectionHeight-c.outerHeight(false)) * 0.5
+        ptop = Math.max (Math.min 450, Math.floor(pad)), origPaddingTop
+        pbottom = Math.max (Math.min 450, Math.ceil(pad)), origPaddingBottom
+        newStyles =
+          'padding-top': ptop
+          'padding-bottom': pbottom
+        if animate # e.g. on load, on resize
+          t.stop().animate newStyles, 100
+        else # e.g. on switch page before fade
+          t.css newStyles

css/index.css

@@ -1,3 +1,17 @@
 body{
     color:red;
-}
+}
+
+
+.transition {
+    width: 100px;
+    height: 100px;
+    background-color: #222222;
+    transition: height 1.5s;
+}
+
+.button1{
+    width: 40px;
+    height: 50px;
+}
+

css/index.html

@@ -4,11 +4,13 @@
     <meta charset="UTF-8">
     <title>Title</title>
     <link rel="stylesheet" type="text/css"  href="index.css">
+    <script src="//staticfile.qnssl.com/jquery/2.0.3/jquery.min.js"></script>
 
 
 </head>
 <body>
-111
+<div class="transition"></div>
+<button class="button1"/>
 </body>
 
 <script src="index.js"></script>

css/index.js

@@ -3,4 +3,10 @@
  */
 
 
-console.log('load index.js');
+
+
+$( ".button1" ).click(function() {
+
+    $('.transition').height(200)
+
+});

my-app/public/index.html

@@ -11,8 +11,21 @@
       work correctly both 　　　　with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
     <title>React App</title>
+    <script src="//staticfile.qnssl.com/jquery/2.0.3/jquery.min.js"></script>
+
+    <style>
+
+
+      @media only screen and (max-width: 727px){
+
+        body h1{
+          color:red;
+        }
+
+      }
+
+    </style>
   </head>
   <body>
   <h1 style="height: 100px">我是h1</h1>

swiper/index.html

@@ -77,7 +77,10 @@
         <div class="swiper-slide">Slide 10</div>
     </div>
     <!-- Add Pagination -->
-    <div class="swiper-pagination"></div>
+
+    <div class="swiper-pagination center slide-selectors">
+
+    </div>
 </div>
 
 <!-- Swiper JS -->
@@ -89,7 +92,7 @@
         pagination: '.swiper-pagination',
         paginationClickable: true,
         paginationBulletRender: function (index, className) {
-            return '<span class="' + className + '">' + (index + 1) + '</span>';
+            return '<span class="test ' + className + '">' + (index + 1) + '</span>';
         }
     });
 </script>