|
|
| 第6行： |
第6行： |
| | ． ． ， ，“”！！（ | | ． ． ， ，“”！！（ |
| | }} | | }} |
| − |
| |
| − | == Animated {{tl|Hidebox}}? ==
| |
| − |
| |
| − | {{MywikiParaHack|<html><details class="lnnblog-box </html><html>" </html><html>>
| |
| − | <summary class="lnnblog-box-heading" role=button </html><html>></html>hidebox<html></summary></html>}}
| |
| − | <div class="lnnblog-box-body">
| |
| − | 一二三四五，上山打老虎。
| |
| − | </div>
| |
| − | {{MywikiParaHack|<html></details></html>}}
| |
| − |
| |
| − | {{MywikiParaHack|<html><style>
| |
| − | .lnnblog-box {
| |
| − | max-width: 100%;
| |
| − | }
| |
| − | .lnnblog-box[data-lnnblog-hidebox-state="expand"] {
| |
| − | overflow: hidden;
| |
| − | }
| |
| − | .lnnblog-box-heading {
| |
| − | list-style: none;
| |
| − | position: relative;
| |
| − | padding-left: 1.2rem;
| |
| − | }
| |
| − | .lnnblog-box-heading::-webkit-details-marker { display: none }
| |
| − | .lnnblog-box-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(0deg);
| |
| − | transform-origin: 0.25rem 50%;
| |
| − | }
| |
| − | .lnnblog-box[open] > .lnnblog-box-heading::before {
| |
| − | transform: rotate(90deg);
| |
| − | }
| |
| − | .lnnblog-box[data-lnnblog-hidebox-state="expand"] > .lnnblog-box-heading::before {
| |
| − | animation: expand 250ms;
| |
| − | }
| |
| − | .lnnblog-box[data-lnnblog-hidebox-state="shrink"] > .lnnblog-box-heading::before {
| |
| − | transform: rotate(0);
| |
| − | animation: shrink 250ms;
| |
| − | }
| |
| − | @keyframes expand {
| |
| − | from { transform: rotate(0deg); }
| |
| − | to { transform: rotate(90deg); }
| |
| − | }
| |
| − | @keyframes shrink {
| |
| − | from { transform: rotate(90deg); }
| |
| − | to { transform: rotate(0deg); }
| |
| − | }
| |
| − | </style><script>
| |
| − | var animationDuration = 250
| |
| − |
| |
| − | $( ".lnnblog-box-heading" ).on( "click", function ( event ) {
| |
| − | var $this = $( this )
| |
| − | var $parent = $this.parent()
| |
| − | var $body = $this.nextAll( ".lnnblog-box-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.outerWidth( targetWidth + 1 )
| |
| − | $this.addClass( "lnnblog-hidebox-heading-open" )
| |
| − | $parent
| |
| − | .attr( "data-lnnblog-hidebox-state", "expand" )
| |
| − | .width( currentWidth )
| |
| − | .height( currentHeight )
| |
| − | $parent.animate( {
| |
| − | width: targetWidth,
| |
| − | height: targetHeight
| |
| − | }, {
| |
| − | duration: animationDuration,
| |
| − | done: function () {
| |
| − | $body.css( "width", "" )
| |
| − | $parent
| |
| − | .css( {
| |
| − | width: "",
| |
| − | height: ""
| |
| − | } )
| |
| − | .removeAttr( "data-lnnblog-hidebox-state" )
| |
| − | }
| |
| − | } )
| |
| − | } 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.outerWidth( currentWidth + 1 )
| |
| − | $this.removeClass( "lnnblog-hidebox-heading-open" )
| |
| − | $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 )
| |
| − | .removeAttr( "data-lnnblog-hidebox-state" )
| |
| − | }
| |
| − | } )
| |
| − | }
| |
| − | //return false
| |
| − | })
| |
| − | </script></html>}}
| |
