帮助:沙盒：修订间差异

2022年11月21日 (一) 23:06的版本

lnncrypt

              ．    ．   ，       ，“”！！（

Animated {{Hidebox}}?

hidebox

@@ 第6行： / 第6行： @@
               ．    ．   ，       ，“”！！（
 }}
+== Animated {{tl|Hidebox}}? ==
+{{hidebox|hidebox|Lorem ipsum dolor sit amet}}
+{{MywikiParaHack|<html><style>
+.lnnblog-hidebox {
+  overflow: hidden;
+}
+.lnnblog-hidebox-heading {
+  list-style: none;
+  position: relative;
+  padding-left: 1.2rem;
+}
+.lnnblog-hidebox-heading::-webkit-details-marker { display: none }
+.lnnblog-hidebox-heading::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0.4rem;
+  margin: auto;
+  height: 0;
+  border: 0.3rem solid transparent;
+  border-left-width: 0.5rem;
+  border-left-color: currentColor;
+  transform: rotate(0);
+  transform-origin: 0.25rem 50%;
+  transition: 250ms transform;
+}
+.lnnblog-hidebox[open]:not([data-lnnblog-hidebox-state]) > .lnnblog-hidebox-heading::before,
+.lnnblog-hidebox[data-lnnblog-hidebox-state="expand"] > .lnnblog-hidebox-heading::before {
+  transform: rotate(90deg);
+}
+</style><script>
+var animationDuration = 250
+$( "#bodyContent" ).on( "click", ".lnnblog-hidebox-heading", function ( event ) {
+  var $this = $( this )
+  var $parent = $this.parent()
+  var $body = $this.nextAll( ".lnnblog-hidebox-body" )
+  var open = $parent.prop( "open" )
+  var state = $parent.attr( "data-lnnblog-hidebox-state" )
+  if ( !open || state === "shrink" ) {
+    event.preventDefault()
+    var currentWidth = $parent.width()
+    var currentHeight = $parent.height()
+    $parent.stop( true, true ).prop( "open", true )
+    var targetWidth = $parent.width()
+    var targetHeight = $parent.height()
+    $body.width( targetWidth )
+    $parent
+      .attr( "data-lnnblog-hidebox-state", "expand" )
+      .width( currentWidth )
+      .height( currentHeight )
+    $parent.animate( {
+        width: targetWidth,
+        height: targetHeight
+      }, {
+        duration: animationDuration,
+        done: function () {
+          $parent.css( {
+            width: "",
+            height: ""
+          } )
+          $body.css( "width", "" )
+        }
+      } )
+  } else if ( open || state === "expand" ) {
+    event.preventDefault()
+    var currentWidth = $parent.width()
+    var currentHeight = $parent.height()
+    $parent.stop( true, true ).prop( "open", false )
+    var targetWidth = $parent.width()
+    var targetHeight = $parent.height()
+    state === "expand" || $body.width( currentWidth )
+    $parent
+      .attr( "data-lnnblog-hidebox-state", "shrink" )
+      .width( currentWidth )
+      .height( currentHeight )
+      .prop( "open", true )
+      .animate( {
+        width: targetWidth,
+        height: targetHeight
+      }, {
+        duration: animationDuration,
+        done: function () {
+          $body.css( "width", "" )
+          $parent
+            .css( {
+              width: "",
+              height: ""
+            } )
+            .prop( "open", false )
+        }
+      } )
+  }
+})
+</script></html>}}