小编Raz*_*fir的帖子

我试图在纯CSS中实现"淡出"效果.这是小提琴.我确实在线查看了几个解决方案,但是,在线阅读完文档后,我试图弄清楚为什么幻灯片动画不起作用.有什么指针吗？

这是HTML

.dummy-wrap {
  animation: slideup 2s;
  -moz-animation: slideup 2s;
  -webkit-animation: slideup 2s;
  -o-animation: slideup 2s;
}

.success-wrap {
  width: 75px;
  min-height: 20px;
  clear: both;
  margin-top: 10px;
}

.successfully-saved {
  color: #FFFFFF;
  font-size: 20px;
  padding: 15px 40px;
  margin-bottom: 20px;
  text-align: center;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background-color: #00b953;
}

@keyframes slideup {
  0% {
    top: 0px;
  }
  75% {
    top: 0px;
  }
  100% {
    top: -20px;
  }
}

@-moz-keyframes slideup {
  0% {
    top: 0px; …

我已经把这个使用字幕作为控件的 codepen滑块(carousel)放在一起,在Flickity插件的帮助下,有以下2个选项:

var flkty = new Flickity(".carousel", {
  pageDots: false,
  wrapAround: true
});

注意:滑块包含视频,而不是图像.

我需要一个类似于antoni.de carousel所具有的百叶窗过渡的过渡.

问题:

1. 什么是最简单,最快速的方法？它只是一个CSS的东西吗？
2. 我是否必须为此过渡编写特定的JavaScript？
3. 我宁愿借用JavaScript,在哪里可以找到一个可读的,未经说明的版本？

旋转木马的代码版本在这里.

更新:我添加了部分答案.正如我在答案中所说,我希望我可以将视频本身用于过渡.

在这个页面上有一个自定义的 HTML 5 音频播放器“处理程序”：

<div class="default-player">
    <audio controls="" autoplay="" name="media" id="audio_player">
        <source src="http://stream.radio.co/sedf8bacc9/listen" type="audio/mpeg">
    </audio>
</div>

<div id="audioplayer">
    <button id="pButton" class="pause"></button>
    <div id="timeline">
        <div id="playhead"></div>
    </div>
    <div id="volume_control">
        <label id="rngVolume_label" for="rngVolume">Volume:</label>
        <input type="range" id="rngVolume" min="0" max="1" step="0.01" value="1">
    </div>
    <div class="current-piece">
        <div class="now-playing">Now playing:</div>
        <script src="https://public.radio.co/embed/sedf8bacc9/song.js"></script>
    </div>
</div>

我编写了这个小脚本来将实际玩家绑定到“手柄”：

function radioPlayer(){

    var music = document.getElementById('audio_player');

    function playAudio() {
      if (music.paused) {
        music.play();
        pButton.className = "";
        pButton.className = "pause";
      } else {
        music.pause();
        pButton.className = "";
        pButton.className = "play"; …

我正在尝试制作一个 javascript 程序，它接受一个字符串并将每个单词的第一个字母大写，并使所有其他字符小写。

function titleCase(str) {
  str = str.toLowerCase();
  var array = str.split(" ");
  for(var i =0; i< array.length ; i++){
    array[i][0] = array[i].charAt(0).toUpperCase();

  } 
  var finalString = array.join(" ")
  return finalString ; 
}

console.log(titleCase("I'm a little tea pot"));

由于某种原因array[i].charAt(0).toUpperCase();不会将其值传递给array[i][0]. 这最终使它返回仅包含小写字母的字符串，而不是每个单词的第一个字母都大写。

我正在使用JavaScript / jQuery视频播放器。它有一个我找不到原因的错误。

除其他外，播放器还具有一个进入/退出全屏按钮（可以在HTML代码段的底部看到）：

(function($) {

  /* Helper functions */
  /* 1) full screen */
  function toggleFullScreen(elem) {
    if ((document.fullScreenElement !== undefined && document.fullScreenElement === null) || (document.msFullscreenElement !== undefined && document.msFullscreenElement === null) || (document.mozFullScreen !== undefined && !document.mozFullScreen) || (document.webkitIsFullScreen !== undefined && !document.webkitIsFullScreen)) {
      if (elem.requestFullScreen) {
        elem.requestFullScreen();
      } else if (elem.mozRequestFullScreen) {
        elem.mozRequestFullScreen();
      } else if (elem.webkitRequestFullScreen) {
        elem.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
      } else if (elem.msRequestFullscreen) {
        elem.msRequestFullscreen();
      }
    } else {
      if (document.cancelFullScreen) {
        document.cancelFullScreen();
      } else if …

在 Svelte 应用程序中，我有以下国家/地区数组：

let countries = [
    {
        name:"Alegeria",
        status: "1"
    },
    {
        name:"Bulgaria",
        status :"0"
    }
]

请注意，该status属性是一个字符串。我这样迭代数组：

{#if countries.length > 0}
<table class="table">
    <thead>
        <tr>
            <th>Country</th>
            <th class="text-right">Status</th>
        </tr>
    </thead>
    <tbody>
        {#each countries as c}  
        <tr>
            <td>{c.name}</td>
            <td class="text-right"><Switch bind:checked={Boolean(Number(c.status))} /></td>
        </tr>
    {/each}
    </tbody>
</table>
{:else}
<p class="alert alert-danger">No countries found</p>
{/if}

status正如您所看到的，我尝试使用 将该属性的值转换为布尔值 this Boolean(Number(c.status))。

我没有得到所需的转换，而是收到错误：Can only bind to an identifier (e.g. foo) or a member expression正如REPL显示的那样。

我究竟做错了什么？

我正在使用Codeigniter 3.1.8和AngularJS v1.7.8开发一个博客应用程序。

private function _initPagination($path, $totalRows, $query_string_segment = 'page') {
  //load and configure pagination 
    $this->load->library('pagination');
    $config['base_url'] = "http://".$_SERVER['HTTP_HOST'] . $path;
    $config['query_string_segment'] = $query_string_segment; 
    $config['enable_query_strings'] =TRUE;
    $config['reuse_query_string'] =TRUE;
    $config['total_rows'] = $totalRows;
    $config['per_page'] = 12;
    if (!isset($_GET[$config['query_string_segment']]) || $_GET[$config['query_string_segment']] < 1) {
        $_GET[$config['query_string_segment']] = 1;
    }
    $this->pagination->initialize($config);

    $limit = $config['per_page'];
    $offset = ($this->input->get($config['query_string_segment']) - 1) * $limit;

    return ['limit' => $limit, 'offset' => $offset]; …